/* ==========================================================================
   VUELTA DEL CASTILLO — Sistema base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100vw}
body{
  margin:0;background:var(--c-marfil);color:var(--c-tinta);
  font-family:var(--f-sans);font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 var(--sp-4);font-family:var(--f-display);font-weight:500;
  line-height:1.12;letter-spacing:var(--ls-display);text-transform:uppercase}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p{margin:0 0 var(--sp-4)}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,var(--wrap-narrow));margin-inline:auto}
.section{padding:var(--sp-9) 0}
.section--crema{background:var(--c-crema)}
.section--verde{background:var(--c-verde);color:var(--c-blanco)}


/* kicker: replica el "FARMA" / "NEO-BELLEZA" del logo */
.kicker{font-family:var(--f-sans);font-size:var(--fs-kicker);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-kicker);color:var(--c-arena-ink);
  margin:0 0 var(--sp-3)}
/* sobre verde, el arena claro SI contrasta (6,14:1) */
.on-dark .kicker{color:var(--c-arena)}
.lead{font-size:var(--fs-lead);color:var(--c-tinta-soft);max-width:60ch}


/* --- Botones: 48px minimo en movil (leccion mobile-first Maria) --------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-sans);font-size:.95rem;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;padding:14px 30px;border-radius:var(--r-pill);
  border:1.5px solid transparent;cursor:pointer;transition:var(--t);min-height:48px}
.btn--primary{background:var(--c-verde);color:var(--c-blanco)}
.btn--primary:hover{background:var(--c-verde-deep);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn--arena{background:var(--c-arena);color:var(--c-verde)}
.btn--arena:hover{background:var(--c-arena-deep)}
.btn--ghost{border-color:currentColor;color:var(--c-verde)}
.btn--ghost:hover{background:var(--c-verde);color:var(--c-blanco)}


/* ==========================================================================
   SUPERFICIE OSCURA — una sola definicion para TODO fondo verde.
   Raiz del bug: .hero no llevaba .section--verde, asi que heredaba los colores
   de texto claros del tema (gris sobre verde = ilegible; boton fantasma verde
   sobre verde = ratio 1:1). En vez de parchear caso por caso, cualquier
   superficie oscura lleva .on-dark y estas reglas la cubren entera.
   Regla para paginas nuevas: fondo verde -> anade .on-dark. Sin excepciones.
   ========================================================================== */
.section--verde,.hero,.site-footer{}
.section--verde,.hero{color:var(--c-blanco)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--c-blanco)}
.on-dark p,.on-dark li{color:rgba(255,255,255,.84)}
.on-dark .lead{color:rgba(255,255,255,.84)}
.on-dark .btn--ghost{color:var(--c-blanco);border-color:rgba(255,255,255,.6)}
.on-dark .btn--ghost:hover{background:var(--c-blanco);color:var(--c-verde)}
.on-dark a:not(.btn){color:var(--c-blanco)}

/* --- Topbar ------------------------------------------------------------- */
.topbar{background:var(--c-verde-deep);color:rgba(255,255,255,.9);
  font-size:.8rem;letter-spacing:.04em}
.topbar__inner{display:flex;gap:var(--sp-5);align-items:center;justify-content:center;
  padding:9px 0;flex-wrap:wrap}
.topbar__inner>*{display:inline-flex;align-items:center;gap:.4rem}

/* --- Header ------------------------------------------------------------- */
.site-header{background:var(--c-verde);color:var(--c-blanco);position:sticky;top:0;z-index:50}
.site-header__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:var(--sp-5);padding:var(--sp-4) 0}
.brand{display:flex;align-items:center;gap:.7rem}
.brand__mark{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__main{font-family:var(--f-display);font-size:1.18rem;letter-spacing:.03em;
  text-transform:uppercase}
.brand__sub{font-size:.6rem;letter-spacing:var(--ls-kicker);color:var(--c-arena);
  text-transform:uppercase;margin-top:3px}
.nav{display:flex;gap:var(--sp-5);justify-content:center}
.nav a{font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 0;min-height:44px;display:inline-flex;align-items:center;
  border-bottom:1.5px solid transparent;transition:var(--t)}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--c-arena)}
.header__actions{display:flex;gap:var(--sp-3);align-items:center}
.icon-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;
  border-radius:50%;transition:var(--t)}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.hamburger{display:none;min-width:44px;min-height:44px}

/* --- Hero --------------------------------------------------------------- */
.hero{background:var(--c-verde);color:var(--c-blanco);position:relative;overflow:hidden;
  padding:var(--sp-9) 0}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center}
.hero h1{margin-bottom:var(--sp-5)}
.hero__ctas{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.hero__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
/* Textura de fondo: gradiente sutil propio, NO una imagen de marca repetida.
   (Iba con el archivo "05-Vinilo", que resulto ser la hoja de opciones de logo, no la fachada.) */
.leaf-tex::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 78% 30%, rgba(201,168,124,.10), transparent 62%),
             radial-gradient(ellipse 60% 45% at 12% 78%, rgba(76,139,90,.12), transparent 60%)}

/* --- Cards -------------------------------------------------------------- */
.grid{display:grid;gap:var(--sp-5)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--c-blanco);border:1px solid var(--c-linea);border-radius:var(--r-md);
  padding:var(--sp-6);transition:var(--t)}
.card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.card h3{margin-bottom:var(--sp-2)}
.card p{color:var(--c-tinta-soft);margin-bottom:0;font-size:.97rem}
.link-arrow{display:inline-flex;align-items:center;gap:.45rem;margin-top:var(--sp-4);
  padding:10px 0;min-height:44px;font-size:.86rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-verde);border-bottom:1.5px solid var(--c-arena)}

/* --- Bloque de confianza (PLAYBOOK-VENTAS R6) --------------------------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
.trust__item{text-align:center}
.trust__num{font-family:var(--f-display);font-size:2rem;color:var(--c-arena);
  display:block;margin-bottom:var(--sp-2)}
.trust__label{font-size:.88rem;color:rgba(255,255,255,.8);line-height:1.4}

/* --- Footer ------------------------------------------------------------- */
.site-footer{background:var(--c-verde);color:rgba(255,255,255,.78);padding:var(--sp-8) 0 var(--sp-5)}
.site-footer h5{font-family:var(--f-sans);font-size:.8rem;letter-spacing:var(--ls-kicker);
  text-transform:uppercase;color:var(--c-arena);margin:0 0 var(--sp-4)}
.site-footer a{color:rgba(255,255,255,.78)}
.site-footer a:hover{color:var(--c-blanco)}
.site-footer strong{color:var(--c-blanco)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6)}
.footer-grid li{margin-bottom:.35rem;list-style:none}
.footer-grid ul{padding:0;margin:0}
.footer-grid a{display:inline-block;min-height:36px;line-height:36px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:var(--sp-7);
  padding-top:var(--sp-4);display:flex;justify-content:space-between;gap:var(--sp-4);
  font-size:.82rem;flex-wrap:wrap}
.legal-links{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.mtryx-link{color:var(--c-arena)}

/* ==========================================================================
   MOBILE — leccion "auditoria 9-jun Maria": todo verificado a 390px
   ========================================================================== */
@media (max-width:980px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .hero__grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:880px){
  .grid--3{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
  /* marquee/beneficios: envolver, NUNCA overflow-x:auto */
  .topbar__inner{flex-wrap:wrap;justify-content:center;gap:10px 20px;font-size:.78rem}
}
@media (max-width:760px){
  .nav{display:none}
  .hamburger{display:inline-flex}
  .site-header__inner{grid-template-columns:auto 1fr auto}
  .hero__ctas{flex-direction:column;align-items:stretch}
  .hero__ctas .btn{width:100%;font-size:1.02rem;padding:16px 24px}
}
@media (max-width:720px){
  /* topbar: un solo item, centrado, con ellipsis.
     :not(:first-child) y NO ".topbar__inner > *" — las media queries no suman
     especificidad y la regla base de abajo ganaria (bug real cazado en Maria) */
  .topbar__inner{justify-content:center}
  .topbar__inner>*:not(:first-child){display:none}
  .topbar__inner>*:first-child{max-width:92vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:600px){
  .brand__mark{width:40px;height:40px}
  .brand__main{font-size:1rem}
  .section{padding:var(--sp-8) 0}
  .footer-bottom{flex-direction:column}
  .legal-links{flex-wrap:wrap}
}
@media (max-width:400px){
  .trust{grid-template-columns:1fr}
}
/* inputs: 16px obligatorio para evitar zoom automatico en iOS Safari */
input,select,textarea{font-family:inherit;font-size:16px;min-height:48px;
  border:1px solid var(--c-linea);border-radius:var(--r-sm);padding:0 var(--sp-4);
  background:var(--c-blanco);color:var(--c-tinta)}
a[href^="tel:"],a[href^="mailto:"],a[href*="wa.me"]{min-height:44px;display:inline-flex;
  align-items:center}
:focus-visible{outline:2.5px solid var(--c-arena);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}}

/* --- Buscador overlay --------------------------------------------------- */
.search-ov{position:fixed;inset:0;z-index:100;background:rgba(0,36,15,.94);
  display:none;align-items:center;justify-content:center;padding:var(--sp-5)}
.search-ov.is-open{display:flex}
.search-ov__form{display:flex;gap:var(--sp-3);width:min(100%,640px);flex-wrap:wrap}
.search-ov__form input{flex:1 1 260px}
.search-ov__close{position:absolute;top:var(--sp-5);right:var(--sp-5);background:none;
  border:none;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;
  min-width:44px;min-height:44px}
/* --- Nav movil ---------------------------------------------------------- */
@media (max-width:760px){
  .nav.is-open{display:flex;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;background:var(--c-verde-deep);padding:var(--sp-4) var(--sp-5)}
  .nav.is-open a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .site-header{position:relative}
}
/* --- Cookie bar --------------------------------------------------------- */
.cookie-bar{position:fixed;left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);z-index:90;
  background:var(--c-verde);color:#fff;border-radius:var(--r-md);box-shadow:var(--sh-lg);
  padding:var(--sp-5);display:flex;gap:var(--sp-5);align-items:center;
  justify-content:space-between;flex-wrap:wrap}
.cookie-bar p{margin:0;font-size:.9rem;max-width:60ch}
.cookie-bar a{color:var(--c-arena);text-decoration:underline}
.cookie-bar__btns{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.cookie-bar .btn{color:#fff}
.cookie-bar .btn--arena{color:var(--c-verde)}
@media (max-width:600px){.cookie-bar{flex-direction:column;align-items:stretch}
  .cookie-bar__btns .btn{flex:1}}

/* Hero con sello sobre disco de marfil.
   Sin foto real de la farmacia todavia (los 3 archivos de marca son artes de
   logo). El branding prohibe foto-stock generica, asi que el hero es de marca.
   Verde sobre verde se perdia: el disco marfil lo despega, y ademas replica
   como viene presentado el sello en la hoja de marca original. */
.hero__media--seal{box-shadow:none;display:flex;justify-content:center;align-items:center}
.hero__media--seal img{width:min(100%,420px);height:auto;border-radius:50%;
  background:var(--c-marfil);padding:min(7vw,34px);
  box-shadow:0 28px 70px rgba(0,36,15,.5)}
@media (max-width:980px){.hero__media--seal img{width:min(70%,300px)}}

/* ==========================================================================
   FIX tap targets (auditoria propia a 390px, 18-ago).
   Regla Maria: footer links 36px desktop / 44px movil. Los legales no tenian
   min-height ninguno (salian a 22px).
   Nota: los enlaces EN LINEA dentro de un parrafo (p.ej. "Ver politica" del
   banner de cookies) estan exentos por WCAG 2.5.8 — no se tocan.
   ========================================================================== */
.legal-links a{display:inline-flex;align-items:center;min-height:36px}
@media (max-width:760px){
  .footer-grid a{min-height:44px;line-height:1.35;display:inline-flex;align-items:center}
  .legal-links{gap:var(--sp-2) var(--sp-4)}
  .legal-links a{min-height:44px}
}
/* Marca del header: en pantallas estrechas no debe romper en 3 lineas */
@media (max-width:560px){
  .brand__main{font-size:.92rem;letter-spacing:.02em}
  .brand__sub{font-size:.54rem;letter-spacing:.12em;white-space:nowrap}
  .brand__mark{width:36px;height:36px}
}
@media (max-width:380px){
  /* a lo ultimo, la sub-marca cede antes que el buscador (leccion Maria:
     el buscador SIEMPRE se mantiene) */
  .brand__sub{display:none}
}
/* Cookie bar: el boton fantasma sobre verde necesita borde visible */
.cookie-bar .btn--ghost{border-color:rgba(255,255,255,.55);background:transparent}
.cookie-bar .btn--ghost:hover{background:#fff;color:var(--c-verde)}
.brand{min-height:44px}

/* ==========================================================================
   FIX contraste + header estrecho (auditoria 18-ago a 390px)
   ========================================================================== */

/* Header a 390px: 4 iconos de 44px + marca no caben. Se cede "mi cuenta"
   primero; el BUSCADOR nunca se oculta (leccion Maria). */
@media (max-width:430px){
  .header__actions{gap:var(--sp-1)}
  .header__actions a[aria-label="Mi cuenta"]{display:none}
}
@media (max-width:360px){
  .header__actions a[aria-label="Cesta"]{display:none}
}

/* ==========================================================================
   MARCA DEL HEADER — 19-ago-2026
   Fuera el sello circular: a 46px leia como una foto de perfil, no como una
   marca (Jorge). El wordmark tipografico solo es mas solido y coherente con
   el logo real, que es tipografico.
   Y se cuadran los dos tamaños: el nombre manda, la sub-marca acompaña.
   Ratio 1 : 0.46 y misma alineacion optica a la izquierda.
   ========================================================================== */
.brand{gap:0}
.brand__text{display:flex;flex-direction:column;line-height:1.08}
.brand__main{
  font-family:var(--f-display);
  font-size:1.22rem;              /* nombre: el peso visual */
  letter-spacing:.045em;
  text-transform:uppercase;
  font-style:normal;
}
.brand__sub{
  font-family:var(--f-sans);
  font-size:.56rem;               /* sub-marca: acompaña, no compite */
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-arena);
  margin-top:4px;
}
@media (max-width:600px){
  .brand__main{font-size:1.02rem;letter-spacing:.035em}
  .brand__sub{font-size:.5rem;letter-spacing:.16em}
}

/* Cabecera en tabletas (QA de apertura 20-oct-2026): entre 761 y 900 px el menu de seis enlaces no cabe junto al logo y
   los iconos de buscar, cuenta y cesta quedaban fuera de la pantalla. Ahi se usa el menu de hamburguesa (como a 760 px o menos)
   y de 901 a 1180 px se compacta el menu para que quepa en una linea. */
@media (min-width:761px) and (max-width:900px){
  .nav{display:none}
  .hamburger{display:inline-flex}
  .nav.is-open{display:flex;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;background:var(--c-verde-deep);padding:var(--sp-4) var(--sp-5)}
  .nav.is-open a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
}
@media (min-width:901px) and (max-width:1180px){
  .nav{gap:14px}
  .nav a{font-size:.76rem}
  .header__actions{gap:4px}
}