/* ==========================================================================
   VUELTA DEL CASTILLO — Capa editorial
   Escala tipografica mas ambiciosa, layouts asimetricos, reveals al scroll.
   ========================================================================== */

/* --- Escala display ----------------------------------------------------- */
.display{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.005em;line-height:.95}
.display--xl{font-size:clamp(2.5rem,1.2rem + 5.4vw,6.1rem)}
.display--l {font-size:clamp(2rem,1rem + 3.6vw,4.2rem)}
.rule{height:1px;background:var(--c-linea);border:0;margin:var(--sp-7) 0}
.on-dark .rule{background:rgba(255,255,255,.18)}

/* --- HERO full-bleed ---------------------------------------------------- */
/* BUG corregido: con isolation:isolate el <section> crea contexto de apilamiento,
   asi que los hijos con z-index negativo se iban DETRAS de su propio background y
   la foto no se veia. Se apila en positivo: foto 0, contenido 2. */
.hero-ed{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;
  background:var(--c-verde);overflow:hidden}
/* Cabecera de la portada. La foto es el <img> del <picture> (lleva su alt y se precarga con las mismas URLs); el fondo ya no
   pinta ninguna imagen (antes la repetía debajo del <img>, tapada, y bajaba dos veces la misma foto).
   Escritorio: la foto se ancla ABAJO A LA DERECHA y no se recorta nunca: mide como mucho el alto de la cabecera y el 65 % de su
   ancho. Con ese tope el grupo de envases queda siempre a la derecha del titular (el titular, el más ancho, llega al 56-61 %
   del ancho) y no se corta a ningún tamaño de pantalla. El borde izquierdo y el superior de la foto se funden con el verde. */
.hero-ed__bg{position:absolute;inset:0;z-index:0}
.hero-ed__bg img{position:absolute;right:0;bottom:0;width:auto;height:auto;max-width:65%;max-height:100%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 42%),linear-gradient(to bottom,transparent 0,#000 22%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 42%),linear-gradient(to bottom,transparent 0,#000 22%);
  mask-composite:intersect}
.hero-ed__inner{padding:var(--sp-9) 0 var(--sp-8);width:min(100% - 2.5rem,var(--wrap));
  margin-inline:auto;position:relative;z-index:2}
.hero-ed__copy{max-width:min(100%,560px)}
.hero-ed h1{margin:0 0 var(--sp-5);color:#fff}
.hero-ed .lead{color:rgba(255,255,255,.9);max-width:46ch;font-size:clamp(1.05rem,1rem + .35vw,1.28rem)}
.hero-ed__ctas{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
/* Movil y tableta (<=980 px): la foto vertical va ARRIBA y el texto DEBAJO, sobre el verde liso. */
@media (max-width:980px){
  .hero-ed{display:block;min-height:auto}
  .hero-ed__bg{position:relative;inset:auto}
  .hero-ed__bg img{position:static;width:100%;max-width:none;max-height:none;aspect-ratio:4/5;object-fit:cover;object-position:center top;
    -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
  .hero-ed__inner{padding:var(--sp-6) 0 var(--sp-7)}
  .hero-ed__ctas .btn{width:100%}
}
@media (min-width:601px) and (max-width:980px){.hero-ed__bg img{aspect-ratio:1/1}}

/* --- Ticker de confianza ------------------------------------------------ */
.ticker{background:var(--c-verde-deep);color:rgba(255,255,255,.9);padding:var(--sp-4) 0;
  border-block:1px solid rgba(255,255,255,.1)}
.ticker__inner{display:flex;gap:var(--sp-4) clamp(1.1rem,2.2vw,2.4rem);justify-content:center;
  align-items:center;flex-wrap:wrap;font-size:clamp(.7rem,.62rem + .22vw,.8rem);
  letter-spacing:.07em;text-transform:uppercase}
.ticker__item{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.ticker__item b{font-family:var(--f-display);font-size:1em;color:var(--c-arena);
  letter-spacing:.02em;white-space:nowrap}
@media (max-width:880px){.ticker__item{white-space:normal}}

/* --- Bloque editorial asimetrico ---------------------------------------- */
.ed{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-6);align-items:center}
.ed__media{grid-column:1 / span 6;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.ed__copy{grid-column:8 / span 5}
.ed--flip .ed__media{grid-column:7 / span 6;order:2}
.ed--flip .ed__copy{grid-column:1 / span 5;order:1}
.ed__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
@media (max-width:980px){
  .ed{grid-template-columns:1fr;gap:var(--sp-5)}
  .ed__media,.ed__copy,.ed--flip .ed__media,.ed--flip .ed__copy{grid-column:1/-1}
  .ed--flip .ed__media{order:0}.ed--flip .ed__copy{order:1}
  /* Fotos de envases cuadradas: se ven enteras tambien en movil (a 16/10 recortaban la parte de arriba y de abajo de los envases). */
  .ed__media img{aspect-ratio:1/1}
}

/* --- Indice de servicios (lista editorial, no cajas) -------------------- */
.index-list{border-top:1px solid var(--c-linea)}
.index-list__row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-5);
  align-items:baseline;padding:var(--sp-5) 0;border-bottom:1px solid var(--c-linea);
  transition:var(--t);min-height:44px}
.index-list__row:hover{background:linear-gradient(90deg,rgba(0,53,29,.04),transparent 60%);
  padding-left:var(--sp-3)}
.index-list__num{font-family:var(--f-sans);font-size:.74rem;letter-spacing:.16em;
  color:var(--c-arena-ink);min-width:2.4ch}
.index-list__title{font-family:var(--f-display);font-size:clamp(1.2rem,1rem + 1vw,1.9rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.15}
.index-list__desc{display:block;font-family:var(--f-sans);font-size:.95rem;
  text-transform:none;letter-spacing:0;color:var(--c-tinta-soft);margin-top:.35rem;
  max-width:52ch;line-height:1.55}
.index-list__go{font-size:1.5rem;color:var(--c-arena-ink);transition:var(--t)}
.index-list__row:hover .index-list__go{transform:translateX(5px)}
@media (max-width:600px){
  .index-list__row{grid-template-columns:auto 1fr;gap:var(--sp-3)}
  .index-list__go{display:none}
}

/* --- Cita de la farmaceutica -------------------------------------------- */
.quote{max-width:34ch;font-family:var(--f-display);text-transform:none;
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2.6rem);line-height:1.25;letter-spacing:0}
.quote__attr{font-family:var(--f-sans);font-size:.78rem;letter-spacing:var(--ls-kicker);
  text-transform:uppercase;color:var(--c-arena);margin-top:var(--sp-5)}

/* --- Reveal al scroll ---------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Migas del subhero: tap target 44px (auditoria 18-ago: salian a ~22px) */
nav[aria-label="Migas"] a{display:inline-flex;align-items:center;min-height:44px;
  padding:0 2px}

/* ==========================================================================
   19-oct-2026 - formulario de contacto real, textos legales, datos pendientes.
   Mismas fichas, tipografias y colores de la web: solo se anade lo que faltaba.
   ========================================================================== */
[hidden]{display:none!important}
.form{display:grid;gap:var(--sp-4);max-width:640px;margin-top:var(--sp-5)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.form__field{display:flex;flex-direction:column;gap:var(--sp-2)}
.form__field label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-tinta-soft)}
.form textarea{min-height:150px;padding:var(--sp-3) var(--sp-4);line-height:1.5}
.form__check{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:.92rem;color:var(--c-tinta-soft);cursor:pointer}
.form__check input{min-height:0;width:22px;height:22px;flex:0 0 auto;margin-top:1px}
.form__hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.form__msg{margin:0;font-size:.95rem;min-height:1.4em}
.form__msg--ok{color:var(--c-verde)}
.form__msg--err{color:var(--c-error)}
@media (max-width:600px){.form__row{grid-template-columns:1fr}}
.legal-text h2{margin-top:var(--sp-6)}
.legal-text ul,.legal-text ol{margin-bottom:var(--sp-4)}
.legal-text code{font-size:.85em;background:var(--c-crema);padding:1px 5px;border-radius:var(--r-sm);word-break:break-all}
.dato--pendiente{background:var(--c-crema);outline:1px dashed var(--c-arena-ink);padding:0 4px}
.cookie-bar__btns .btn{min-width:130px}

/* Tablas de envios y de cookies: en movil cada fila pasa a ser una ficha con su etiqueta (antes la columna «Coste» quedaba
   fuera de pantalla y habia que desplazar de lado). En escritorio, la tabla de siempre. */
@media (min-width:641px){.tabla-resp{min-width:620px}}
@media (max-width:640px){
  .tabla-resp,.tabla-resp tbody{display:block;width:100%}
  .tabla-resp thead{display:none}
  .tabla-resp tr{display:block;padding:var(--sp-3) 0;border-bottom:1px solid var(--c-linea)}
  .tabla-resp td{display:flex;gap:var(--sp-3);justify-content:space-between;align-items:baseline;padding:5px 2px!important;border:0!important;text-align:right}
  .tabla-resp td::before{content:attr(data-label);flex:0 0 34%;text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-tinta-soft)}
  .tabla-resp td:first-child{display:block;text-align:left;padding-bottom:var(--sp-2)!important}
  .tabla-resp td:first-child::before{display:none}
}