/* Yira Vargas — identidad propia. No reutilizar en otras webs del kit. */

:root{
  --tinta:#221A1E;
  --tinta-2:#2E2329;
  --marfil:#F4EDE3;
  --laton:#B98A4B;
  --laton-claro:#E0B978;
  --humo:#A2939A;

  --sombra-suave:0 1px 2px rgba(34,26,30,.28), 0 8px 24px rgba(34,26,30,.34);
  --sombra-alta:0 2px 4px rgba(34,26,30,.30), 0 18px 48px rgba(34,26,30,.42);
  --sombra-clara:0 1px 2px rgba(46,35,41,.10), 0 14px 36px rgba(46,35,41,.14);

  --display:"Bodoni Moda", Georgia, "Times New Roman", serif;
  --texto:"Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ancho:1160px;
  --aire:clamp(4.5rem, 10vw, 8.5rem);
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--tinta);
  color:var(--marfil);
  font-family:var(--texto);
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{max-width:100%;height:auto;display:block;}

a{color:inherit;}

:focus-visible{
  outline:2px solid var(--laton-claro);
  outline-offset:3px;
  border-radius:2px;
}

/* Grano */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 1.25rem;
}

@media (min-width:720px){
  .contenedor{padding:0 2.5rem;}
}

.seccion{padding:var(--aire) 0;}

.saltar{
  position:absolute;
  left:-9999px;
}
.saltar:focus{
  left:1rem;top:1rem;
  position:fixed;
  z-index:80;
  background:var(--marfil);
  color:var(--tinta);
  padding:.75rem 1.1rem;
  border-radius:999px;
  font-family:var(--mono);
  font-size:.8rem;
}

/* ---------- Elemento firma: el llavero de cuarto ---------- */
.llavero{
  display:inline-flex;
  align-items:center;
  position:relative;
  padding:.42rem 1.15rem .42rem 2.35rem;
  border:1px solid var(--laton);
  border-radius:999px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--laton-claro);
  line-height:1.2;
  white-space:nowrap;
}
.llavero::before{
  content:"";
  position:absolute;
  left:.95rem;
  top:50%;
  width:.55rem;
  height:.55rem;
  margin-top:-.275rem;
  border-radius:50%;
  border:1px solid var(--laton);
  background:var(--tinta);
}
.llavero--claro{color:#8A6329;border-color:#C79A5C;}
.llavero--claro::before{background:var(--marfil);border-color:#C79A5C;}

/* ---------- Tipografía ---------- */
h1,h2,h3{
  font-family:var(--display);
  font-weight:500;
  margin:0;
  letter-spacing:-.012em;
}
h1{
  font-size:clamp(2.85rem, 11vw, 6rem);
  line-height:.98;
}
h2{
  font-size:clamp(1.95rem, 5.2vw, 3.25rem);
  line-height:1.06;
}
h3{
  font-size:clamp(1.35rem, 3.4vw, 1.75rem);
  line-height:1.15;
}
p{margin:0 0 1.1rem;}
p:last-child{margin-bottom:0;}

.acento{
  font-style:italic;
  color:var(--laton-claro);
}

.entradilla{
  font-size:clamp(1.05rem,2.2vw,1.25rem);
  color:var(--humo);
  max-width:46ch;
}

.encabezado-seccion{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  margin-bottom:clamp(2.5rem,6vw,4rem);
}
/* El llavero es una pastilla que abraza su texto: nunca se estira a la
   columna. Como hijo de un flex en columna se estiraría por defecto. */
.encabezado-seccion > .llavero{align-self:flex-start;}
/* La medida del titular va en em, o sea relativa a su propio cuerpo, para
   que no dependa del tamaño del texto base. */
.encabezado-seccion h2{max-width:12em;}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(34,26,30,.92);
  border-bottom:1px solid rgba(185,138,75,.22);
  backdrop-filter:blur(10px);
}
.cabecera__fila{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  height:4.25rem;
}
.logo{
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:.04em;
  text-decoration:none;
}
.logo span{color:var(--laton-claro);}
.nav{display:none;gap:2rem;}
.nav a{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--humo);
  text-decoration:none;
  transition:color .2s ease;
}
.nav a:hover{color:var(--marfil);}
@media (min-width:860px){
  .nav{display:flex;}
}

/* ---------- Redes ---------- */
/* Van en la cabecera además de en el pie. Por debajo de 860px el menú
   se oculta pero estas se quedan: en móvil son la única salida. */
.cabecera__acciones{
  display:flex;
  align-items:center;
  gap:1.75rem;
}
.redes{display:flex;align-items:center;gap:.55rem;}
.red{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.9rem;
  height:1.9rem;
  color:var(--laton-claro);
  text-decoration:none;
  transition:color .2s ease;
}
.red:hover{color:var(--marfil);}
/* Todavía sin perfil: se ve, no se pulsa. */
.red--pendiente{color:var(--humo);opacity:.4;cursor:default;}
.solo-lectores{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- Botones ---------- */
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.95rem 1.6rem;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s ease, opacity .25s ease;
}
.boton:hover{transform:translateY(-2px);}
.boton--laton{
  background:var(--laton);
  color:#1B1417;
  box-shadow:var(--sombra-suave);
}
.boton--linea{
  border-color:rgba(244,237,227,.35);
  color:var(--marfil);
}
.boton--tinta{
  background:var(--tinta);
  color:var(--marfil);
  box-shadow:var(--sombra-clara);
}
.boton--grande{padding:1.15rem 2.2rem;font-size:.82rem;}

/* ---------- Hero ---------- */
.hero{
  padding-top:clamp(3rem,8vw,5.5rem);
  padding-bottom:clamp(3rem,7vw,5rem);
  position:relative;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 80% at 15% 0%, rgba(185,138,75,.16), transparent 60%);
  pointer-events:none;
}
.hero__rejilla{
  position:relative;
  display:grid;
  gap:clamp(2.5rem,6vw,4rem);
  align-items:center;
}
@media (min-width:940px){
  .hero__rejilla{grid-template-columns:1.12fr .88fr;}
}
.hero__texto{display:flex;flex-direction:column;gap:1.75rem;align-items:flex-start;}
.hero__acciones{display:flex;flex-wrap:wrap;gap:.85rem;}

.hero__marco{
  position:relative;
  aspect-ratio:4/5;
  border:1px solid rgba(185,138,75,.5);
  border-radius:2px;
  background:linear-gradient(160deg,var(--tinta-2),#1C1518);
  box-shadow:var(--sombra-alta);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  text-align:center;
}
.hero__marco::after{
  content:"";
  position:absolute;
  inset:.6rem;
  border:1px solid rgba(185,138,75,.28);
  pointer-events:none;
}
/* Con foto de verdad el marco no lleva relleno: la imagen ocupa el
   marco entero y el filete de latón queda por encima. */
.hero__marco--con-foto{padding:0;}
.hero__foto{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:2px;
}
.hueco{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--humo);
  max-width:22ch;
}

.datos{
  display:grid;
  gap:0;
  margin-top:clamp(2.5rem,6vw,4rem);
  border-top:1px solid rgba(185,138,75,.28);
}
@media (min-width:720px){
  .datos{grid-template-columns:repeat(3,1fr);}
}
.dato{
  padding:1.5rem 0;
  border-bottom:1px solid rgba(185,138,75,.18);
}
@media (min-width:720px){
  .dato{padding:1.75rem 1.5rem 1.75rem 0;border-bottom:none;}
}
.dato__valor{
  font-family:var(--display);
  font-size:clamp(1.4rem,3vw,1.9rem);
  line-height:1.1;
  display:block;
}
.dato__etiqueta{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--humo);
  display:block;
  margin-top:.5rem;
}

/* ---------- VSL ---------- */
.vsl__marco{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid var(--laton);
  border-radius:3px;
  background:linear-gradient(150deg,var(--tinta-2),#1B1417);
  box-shadow:var(--sombra-alta);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.1rem;
  padding:1.5rem;
  text-align:center;
}
.vsl__marco::after{
  content:"";
  position:absolute;
  inset:.55rem;
  border:1px solid rgba(185,138,75,.3);
  pointer-events:none;
}
.vsl__play{
  width:3.75rem;
  height:3.75rem;
  border-radius:50%;
  border:1px solid var(--laton);
  display:flex;
  align-items:center;
  justify-content:center;
}
.vsl__play span{
  width:0;height:0;
  border-left:.85rem solid var(--laton-claro);
  border-top:.55rem solid transparent;
  border-bottom:.55rem solid transparent;
  margin-left:.2rem;
}
/* El vídeo que hay es vertical (720x1280). En el marco 16/9 saldría
   con dos franjas negras enormes, así que el marco se pone en pie y
   se centra, con el ancho de un móvil. */
/* La sección separa como todas las demás: el relleno extra de arriba
   se sumaba al del hero y dejaba un hueco muerto antes de la etiqueta.
   El aire que necesita el marco en pie va aquí, alrededor del vídeo. */
.vsl__marco--vertical{
  aspect-ratio:9/16;
  /* 27rem en el marco deja el vídeo en ~412px: el filete y el relleno
     de latón se comen unos 20. */
  max-width:min(27rem,100%);
  margin:clamp(3.5rem,7vw,5.5rem) auto 0;
  padding:.55rem;
}
.vsl__video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:2px;
  display:block;
  background:#000;
}
.vsl__pie{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--humo);
  text-align:center;
  margin-top:1.1rem;
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}

/* ---------- Historia ---------- */
.hitos{
  display:grid;
  gap:0;
  border-top:1px solid rgba(185,138,75,.25);
}
.hito{
  display:grid;
  gap:1rem;
  padding:2.25rem 0;
  border-bottom:1px solid rgba(185,138,75,.18);
}
@media (min-width:820px){
  .hito{grid-template-columns:13rem 1fr;gap:2.5rem;align-items:start;}
}
.hito > .llavero{justify-self:start;}
.hito__cuerpo{max-width:52ch;}
.hito__cuerpo p{color:var(--humo);margin-top:.7rem;}
/* Solo el hito que tiene imagen la lleva; el campo es opcional. */
.hito__imagen{
  width:100%;
  height:auto;
  margin-top:1.5rem;
  border:1px solid rgba(185,138,75,.35);
  border-radius:2px;
}

/* ---------- Puertas ---------- */
.puertas{
  background:var(--marfil);
  color:var(--tinta);
}
.puertas .entradilla{color:#6B5A61;}
.puertas__rejilla{
  display:grid;
  gap:1.5rem;
}
@media (min-width:880px){
  .puertas__rejilla{grid-template-columns:repeat(2,1fr);gap:2rem;}
}
.puerta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.25rem;
  padding:clamp(1.75rem,4vw,2.75rem);
  background:#FBF7F1;
  border:1px solid rgba(185,138,75,.4);
  border-radius:3px;
  box-shadow:var(--sombra-clara);
  height:100%;
}
.puerta__subtitulo{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8A6329;
}
.puerta p{color:#584750;}
.puerta ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.7rem;
  width:100%;
}
.puerta li{
  position:relative;
  padding-left:1.5rem;
  color:#463840;
  font-size:.98rem;
}
.puerta li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  border:1px solid #B98A4B;
}
.puerta .boton{margin-top:auto;}

/* ---------- Testimonios ---------- */
.testimonios__rejilla{
  display:grid;
  gap:1.25rem;
}
@media (min-width:820px){
  .testimonios__rejilla{grid-template-columns:repeat(3,1fr);}
}
.testimonio{
  border:1px dashed rgba(185,138,75,.55);
  border-radius:3px;
  padding:1.75rem;
  min-height:13rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1.5rem;
  background:rgba(46,35,41,.4);
}
.testimonio__texto{
  font-family:var(--display);
  font-size:1.15rem;
  line-height:1.35;
  color:var(--humo);
}
.testimonio__autora{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--laton);
}
.nota{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--humo);
  margin-top:1.75rem;
}

/* ---------- Guía / captación ---------- */
.guia{
  background:var(--tinta-2);
  border-top:1px solid rgba(185,138,75,.25);
  border-bottom:1px solid rgba(185,138,75,.25);
}
.guia__rejilla{
  display:grid;
  gap:clamp(2.5rem,6vw,4rem);
  align-items:start;
}
@media (min-width:940px){
  .guia__rejilla{grid-template-columns:1fr 1fr;}
}
.guia__lista{
  list-style:none;
  margin:1.75rem 0 0;
  padding:0;
  display:grid;
  gap:1rem;
  counter-reset:g;
}
.guia__lista li{
  position:relative;
  padding-left:2.6rem;
  color:var(--humo);
  counter-increment:g;
}
.guia__lista li::before{
  content:counter(g,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.1em;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--laton);
  letter-spacing:.08em;
}

.formulario{
  background:var(--tinta);
  border:1px solid rgba(185,138,75,.45);
  border-radius:3px;
  padding:clamp(1.5rem,4vw,2.25rem);
  box-shadow:var(--sombra-alta);
  display:grid;
  gap:1.1rem;
}
.campo{display:grid;gap:.45rem;}
.campo label{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--humo);
}
.campo input[type="text"],
.campo input[type="email"]{
  width:100%;
  padding:.9rem 1rem;
  background:rgba(244,237,227,.05);
  border:1px solid rgba(244,237,227,.22);
  border-radius:2px;
  color:var(--marfil);
  font-family:var(--texto);
  font-size:1rem;
}
.campo input::placeholder{color:rgba(162,147,154,.75);}
.campo input:focus{border-color:var(--laton);outline:none;}
.consentimiento{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  font-size:.9rem;
  color:var(--humo);
  line-height:1.45;
}
/* La casilla nativa se pinta blanca sobre el fondo oscuro y es lo único
   blanco puro de la web. Se rehace con la paleta. */
.consentimiento input{
  appearance:none;
  -webkit-appearance:none;
  margin-top:.2rem;
  width:1.05rem;
  height:1.05rem;
  flex:none;
  background:rgba(244,237,227,.05);
  border:1px solid rgba(244,237,227,.35);
  border-radius:2px;
  display:grid;
  place-content:center;
  cursor:pointer;
}
.consentimiento input::before{
  content:"";
  width:.5rem;
  height:.28rem;
  border-left:2px solid var(--tinta);
  border-bottom:2px solid var(--tinta);
  transform:translateY(-.06rem) rotate(-45deg) scale(0);
  transition:transform .15s ease;
}
.consentimiento input:hover{border-color:var(--laton);}
.consentimiento input:checked{background:var(--laton);border-color:var(--laton);}
.consentimiento input:checked::before{transform:translateY(-.06rem) rotate(-45deg) scale(1);}
.consentimiento input:focus-visible{outline:2px solid var(--laton-claro);outline-offset:2px;}
.mensaje{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.04em;
  min-height:1.2rem;
}
.mensaje--error{color:#E0956B;}
.mensaje--ok{color:var(--laton-claro);}
.aviso-demo{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--humo);
  opacity:.8;
}

/* ---------- Cierre ---------- */
.cierre{text-align:center;}
.cierre__caja{
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}
/* Misma medida que el resto de titulares: en em, no en el cuerpo base. */
.cierre__caja h2{max-width:12em;}
.cierre__caja p{max-width:44ch;}
/* Última imagen de la página, a lo ancho de la sección y justo antes
   de la llamada. La frase del zapato se lee entera. */
.cierre__imagen{
  width:100%;
  height:auto;
  margin:clamp(1rem,2vw,1.75rem) 0 .5rem;
  border:1px solid rgba(185,138,75,.35);
  border-radius:2px;
}

/* ---------- Pie ---------- */
.pie{
  border-top:1px solid rgba(185,138,75,.25);
  padding:3.5rem 0 4rem;
  font-size:.9rem;
  color:var(--humo);
}
.pie__fila{
  display:grid;
  gap:2rem;
}
@media (min-width:820px){
  .pie__fila{grid-template-columns:1.4fr 1fr;align-items:start;}
}
.pie__avisos{max-width:52ch;display:grid;gap:.6rem;font-size:.85rem;}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:1.25rem;}
.pie__enlaces a{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
}
.pie__enlaces a:hover{color:var(--marfil);}
.pie__marca{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:1rem;
  display:block;
}

/* ---------- Cookies ---------- */
.cookies{
  position:fixed;
  left:1rem;
  right:1rem;
  bottom:1rem;
  z-index:70;
  background:var(--tinta-2);
  border:1px solid rgba(185,138,75,.45);
  border-radius:3px;
  box-shadow:var(--sombra-alta);
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  font-size:.88rem;
  color:var(--humo);
}
@media (min-width:760px){
  .cookies{
    left:auto;
    right:1.5rem;
    bottom:1.5rem;
    max-width:26rem;
  }
}
.cookies[hidden]{display:none;}
.cookies__acciones{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;}
.cookies a{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ---------- Páginas legales ---------- */
.legal{padding:clamp(3.5rem,8vw,6rem) 0;}
.legal h1{font-size:clamp(2.25rem,6vw,3.5rem);margin-bottom:2.5rem;}
.legal__bloque{
  padding:1.75rem 0;
  border-top:1px solid rgba(185,138,75,.2);
  display:grid;
  gap:.75rem;
  max-width:70ch;
}
.legal__bloque h2{font-size:1.3rem;}
.legal__bloque p{color:var(--humo);}
.volver{
  display:inline-block;
  margin-top:2.5rem;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- Movimiento ---------- */
.revelar{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.revelar.visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .revelar{opacity:1;transform:none;}
  .boton:hover{transform:none;}
}