/* Rock Camp — convivencia con el CSS de la web.

   En las páginas que una familia ve, el marco es el de rockcamp.es
   (web/cabecera.php y web/pie.php) y se carga /css/TODO.css: Foundation 5
   más las reglas de la web. Ese CSS va en la capa «web» (ver _marco.php),
   así que cualquier regla nuestra le gana. Lo que queda es lo que Foundation
   pone y nosotros no decimos: eso es lo que se neutraliza aquí.

   Todo va dentro de :where(...) para que pese CERO. Así le gana a
   Foundation (por estar fuera de la capa) pero pierde con cualquier regla
   con clase de base.css o familia.css, que son las que mandan. */

/* ── El fondo y la letra de la web ──────────────────────────────────── */

body.web,
body.web.familia {
  background: #f4f1ec url(/img/marmol.jpg) repeat;
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

/* La barra de menú va fija arriba y es naranja semitransparente: en la web
   siempre hay una foto debajo, y sin ella el menú blanco no se lee sobre el
   mármol. Así que arriba va una franja con la misma foto (frase3) que usan
   las páginas de la web, de la altura de la barra y del «Iniciar sesión»
   que cuelga de ella. El contenido empieza debajo. */
body.web { position: relative; }
body.web::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50px;
  background: #5a3420 url(/img/frase3-1024.jpg) center 35% / cover no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
body.web .contenido {
  margin-top: calc(50px + 1.5rem);
  position: relative;
}
@media only screen and (min-width: 64.063em) {
  body.web::before {
    height: calc(4.6vw + 46px);
    background-image: url(/img/frase3-1800.jpg);
  }
  body.web .contenido { margin-top: calc(4.6vw + 46px + 2rem); }
}

/* El pie de la web tiene la «página rota» encima: que no se coma lo último. */
body.web .contenido { margin-bottom: 4rem; }

/* Los avisos de modo pruebas y de sesión suplantada, dentro del contenido. */
body.web .barra-pruebas,
body.web .barra-suplantacion {
  border-radius: 12px;
  margin-bottom: 1rem;
}

/* ── Lo nuestro, solo dentro de lo nuestro ──────────────────────────── */

/* base.css da color a todos los <a> y tamaño a los <h1>/<h2>. Fuera del
   contenido (la cabecera y el pie de la web) eso pisaría a Foundation: los
   enlaces del menú saldrían naranjas en vez de blancos. revert-layer
   devuelve esas propiedades a lo que diga la capa de la web. */
/* Mismo peso que el «a { }» de base.css (una etiqueta); al ir después, gana. */
:where(body.web) a { color: revert-layer; }
:where(body.web) :is(h1, h2) { font-size: revert-layer; margin: revert-layer; }
:where(body.web .contenido) a { color: var(--naranja); }
:where(body.web .contenido) h1 { font-size: 1.6rem; margin: 0 0 1rem; }
:where(body.web .contenido) h2 { font-size: 1.2rem; margin: 2rem 0 .75rem; }

/* ── Textos ─────────────────────────────────────────────────────────── */

/* Foundation: párrafos de 1.2rem, justificados, grises y con margen. */
:where(body.web .contenido) p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
  text-rendering: auto;
}

/* Foundation: listas de 1.2rem con sangría. */
:where(body.web .contenido) :where(ul, ol) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Foundation: títulos en gris #222 y Roboto normal. El color tiene que
   heredarse: hay títulos blancos sobre fondo oscuro. */
:where(body.web .contenido) :where(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  line-height: 1.25;
  text-rendering: auto;
}
:where(body.web .contenido) h3 { font-size: 1.05rem; }
/* La web pone una barrita naranja debajo de cada <h3> (regla «H3:after», en
   mayúsculas) y 4px de relleno a los <h1>. En nuestras pantallas, no. */
:where(body.web .contenido) h3::after { content: none; }
:where(body.web .contenido) h1 { padding-bottom: 0; }
:where(body.web .contenido) h4 { font-size: 1rem; }

:where(body.web .contenido) small { font-size: 85%; }

:where(body.web .contenido) code {
  color: inherit;
  background: #f0f0f2;
  border: 0;
  padding: .05em .3em;
}

:where(body.web .contenido) hr {
  background: none;
  height: 0;
  border: 0;
  border-top: 1px solid var(--linea);
  margin: 1.25rem 0;
}

/* ── Formularios ────────────────────────────────────────────────────── */

:where(body.web .contenido) label {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* 🔴 La web OCULTA todas las casillas y botones de opción y los dibuja
   con una imagen en la etiqueta que va detrás (12 px de alto). En nuestras
   pantallas las casillas son de verdad: se devuelven a su sitio y la
   etiqueta de detrás vuelve a ser texto normal. Las que nosotros ocultamos
   a propósito (las tarjetas del pago) lo hacen con clase y ganan. */
:where(body.web .contenido) :where(input[type="checkbox"], input[type="radio"]) {
  position: static;
  z-index: auto;
  left: auto;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0 .45em 0 0;
  padding: 0;
  border: 0;
  vertical-align: middle;
  accent-color: var(--naranja);
}
:where(body.web .contenido) :where(input[type="checkbox"], input[type="radio"]) + label {
  display: inline;
  height: auto;
  padding-left: 0;
  line-height: inherit;
  background: none;
  vertical-align: baseline;
}

/* Foundation: campos con borde de 2px, sombra interior, altura fija y
   margen de 1rem por debajo. */
:where(body.web .contenido) :where(
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  input[type="number"], input[type="date"], input[type="search"], input[type="url"],
  input:not([type]), select, textarea
) {
  height: auto;
  margin: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border-width: 1px;
  border-style: solid;
  border-color: var(--linea);
  border-radius: 6px;
  background-color: #fff;
  transition: border-color .12s ease;
}
:where(body.web .contenido) :where(input, select, textarea):focus {
  box-shadow: none;
  background-color: #fff;
}
/* El desplegable conserva la flecha de la web, con sitio para ella. */
:where(body.web .contenido) select {
  padding-right: 2rem;
  background-position: right .6rem center;
}

/* Foundation: botones en Roboto negrita con bordes de 3px a la derecha y
   abajo, y fondo naranja al pasar por encima. */
:where(body.web .contenido) button {
  font-family: inherit;
  border-style: none;
  border-width: 0;
  line-height: 1.2;
}

/* ── Tablas ─────────────────────────────────────────────────────────── */

:where(body.web .contenido) table {
  background: transparent;
  border: 0;
  margin-bottom: 0;
}
:where(body.web .contenido) :where(tr, tr:nth-of-type(even)) { background: transparent; }
:where(body.web .contenido) :where(th, td) {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

/* ── El pie de la web encima de nuestros avisos flotantes ─────────── */

/* El aviso de la app de la zona de familias y el botón de WhatsApp de la
   web van los dos abajo: el de la app, a la izquierda del de WhatsApp. */
body.web .fam-app { bottom: 100px; }

/* ── Paneles que acompañan al bajar ─────────────────────────────────── */

/* Foundation pone overflow: hidden al envoltorio del menú lateral, para
   esconder el menú fuera de la pantalla. Eso anula position: sticky en todo
   lo de dentro: la entrada con el precio del paso 3 se quedaba quieta.
   overflow: clip recorta igual, pero no impide que algo acompañe al bajar.
   Donde no se entienda (Safari anterior a 16), sigue el hidden de la web. */
body.web .off-canvas-wrap { overflow: clip; }

/* ── Más restos de Foundation (revisión del 2026-10-15) ─────────────── */

/* Listas de definición: Foundation las pone a 1,2rem y los <dt> en
   negrita con margen. Nuestras fichas de datos no lo esperan. */
:where(body.web .contenido) dl { font-size: inherit; line-height: inherit; margin: 0; }
:where(body.web .contenido) dt { font-weight: inherit; margin: 0; }

/* Listas con clase: Foundation les da 1,1rem de sangría y margen abajo.
   Las nuestras se colocan solas; las que no llevan clase (las condiciones
   del seguro) conservan la sangría de la web. */
:where(body.web .contenido) :where(ul[class], ol[class]) { margin-left: 0; margin-bottom: 0; }

/* Párrafos y formularios: los márgenes de toda la vida, no los de la web. */
:where(body.web .contenido) p { margin: 0 0 1em; }
:where(body.web .contenido) form { margin: 0; }

/* Botones: Foundation les pone 1,25rem de margen abajo y un relleno de
   0,875 × 1,75rem a todos, también a los redondos de 30px (copiar el IBAN,
   cerrar el aviso de la app). Cada botón nuestro trae el suyo. */
:where(body.web .contenido) button {
  margin: 0;
  padding: revert;
  font-size: inherit;
  text-align: center;
  position: static;
  transition: none;
}
:where(body.web .contenido) :where(input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="date"], input[type="search"]) { display: revert; }

/* La rejilla de Foundation coge todo lo que tenga «column» en la clase, y
   eso incluye .fam-columna. */
:where(body.web .contenido) [class*="column"] { float: none; }

:where(body.web .contenido) :where(h1, h2, h3, h4, h5, h6) small { line-height: inherit; }