:root{
  /* Color 60-30-10 blanco/negro */
  --fondo:#ffffff;       
  --sec:#f2f2f0;          
  --texto:#14110e;        
  --muted:#5b5750;        
  --acento:#1f1f1f;       
  --linea:#e3e1dc;
  --radio:12px;
  --sombra-1:0 4px 12px rgba(20,17,14,.08);
  --sombra-2:0 16px 32px rgba(20,17,14,.12);

  /* Escala 8pt en rem (1rem = 16px) */
  --s1:0.25rem;  /* 4px */
  --s2:0.5rem;   /* 8px */
  --s3:1rem;     /* 16px */
  --s4:1.5rem;   /* 24px */
  --s5:2rem;     /* 32px */
  --s6:3rem;     /* 48px */
  --s7:4rem;     /* 64px */

  /* Tipo modular razón 1.25 desde 16px */
  --text-sm:0.8rem;
  --text-base:1rem;
  --text-lg:1.25rem;
  --text-xl:1.563rem;
  --text-2xl:1.953rem;
  --text-3xl:2.441rem;
  --text-4xl:3.052rem;
}

/* ---------- 01. BASE ---------- */
*{
  box-sizing:border-box;
  margin:0;
}
html{
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--muted) var(--sec);
}
body{
  font-family:"Montserrat",system-ui,sans-serif;
  background:var(--fondo);
  color:var(--texto);
  font-size:var(--text-base);
  line-height:1.5;
}
h1,h2,h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  line-height:1.15;
  letter-spacing:-0.02em;
}
h1{
  font-size:var(--text-4xl);
  margin-bottom:var(--s3);
}
/* Títulos balanceados + anclas que no quedan bajo el header fijo */
h1,
h2{
  text-wrap:balance;
}
section[id]{
  scroll-margin-top:80px;
}
h2{
  font-size:var(--text-2xl);
  margin-bottom:var(--s3);
}

h3{
  font-size:var(--text-lg);
  margin-bottom:var(--s2);
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  letter-spacing:0;
}
p{
  max-width:65ch;
}
a{
  color:inherit;
}
:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:2px;
}
/* Salto al contenido: invisible hasta navegar con teclado */
.skip{
  position:absolute;
  left:var(--s3);
  top:-100px;
  z-index:100;
  background:var(--texto);
  color:#fff;
  padding:10px 18px;
  border-radius:0 0 10px 10px;
  text-decoration:none;
  font-weight:600;
  transition:top .2s ease;
}
.skip:focus{
  top:0;
}
/* Selección de texto con la marca (blanco y negro) */
::selection{
  background:var(--acento);
  color:#fff;
}
::-webkit-scrollbar{
  width:10px;
  height:10px;
}
::-webkit-scrollbar-track{
  background:var(--sec);
}
::-webkit-scrollbar-thumb{
  background:var(--muted);
  border-radius:999px;
}

/* ---------- 02. UTILIDADES ---------- */
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding-left:var(--s3);
  padding-right:var(--s3);
}

/* ---------- 03. HEADER ---------- */
.site-header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--linea);
  z-index:10;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  min-height:64px;
}
.brand{
  display:flex;
  align-items:center;
  gap:var(--s2);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.08em;
  transition:opacity .2s ease;
}
.brand:hover{
  opacity:.7;
}
.brand em{
  font-style:normal;
  background:var(--acento);
  color:#fff;
  padding:.1em .4em;
  border-radius:6px;
}
.nav{
  display:flex;
  gap:var(--s3);
}
.nav a{
  position:relative;
  text-decoration:none;
  font-size:.95rem;
  padding-bottom:var(--s1);
}
/* Subrayado que se dibuja de izquierda a derecha al pasar el mouse */
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:var(--acento);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav a:hover::after,
.nav a:focus-visible::after{
  transform:scaleX(1);
}
.header-cta{
  display:flex;
  align-items:center;
  gap:var(--s2);
}
.menu-btn{
  display:none;
  background:none;
  border:1px solid var(--linea);
  border-radius:8px;
  padding:8px;
  min-width:44px;
  min-height:44px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.menu-btn:hover{
  background:var(--sec);
  border-color:var(--muted);
}

/* ---------- 04. BOTONES ---------- */
/* Principal + ghost + estados (hover/active/disabled/focus) */
.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  background:var(--acento);
  color:#fff;
  border:2px solid var(--acento);
  border-radius:10px;
  padding:14px 26px;
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  min-height:48px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn:hover{
  background:#000;
  border-color:#000;
  transform:translateY(-2px);
  box-shadow:var(--sombra-1);
}
.btn:active{
  transform:translateY(0);
  box-shadow:none;
}
.btn:disabled{
  background:#a8a8a8;
  border-color:#a8a8a8;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.btn-ghost{
  background:transparent;
  color:var(--acento);
}
.btn-ghost:hover{
  background:var(--sec);
  border-color:#000;
}
.btn svg{
  flex-shrink:0;
}
.btn-sm{
  padding:10px 18px;
  min-height:44px;
  font-size:.9rem;
}
.btn-light{
  background:#fff;
  color:#14110e;
  border-color:#fff;
}
.btn-light:hover{
  background:var(--sec);
  border-color:var(--sec);
}
.btn-ghost-light{
  background:transparent;
  color:#fff;
  border-color:#fff;
}
.btn-ghost-light:hover{
  background:rgba(255,255,255,.15);
}
.cta-row{
  display:flex;
  gap:var(--s3);
  flex-wrap:wrap;
  margin-top:var(--s4);
}

/* ---------- 05. HERO ---------- */
.hero{
  padding:var(--s7) 0;
  background:linear-gradient(180deg,var(--fondo) 0%,#f7f7f5 100%);
}
.hero-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--s4);
  align-items:start;
}
/* Título fluido + itálica editorial en "mi vida" */
.hero h1{
  font-size:clamp(2.441rem, 1.2rem + 6vw, 3.8rem);
}
.hero h1 em{
  font-style:italic;
}
/* Título con degradado sutil gris-negro (contraste AA verificado) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{
    background:linear-gradient(180deg,var(--texto) 55%,#4a4640 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}
.hero-grid > div:first-child{
  grid-column:span 8;
}
.hero-card{
  grid-column:span 4;
  background:var(--sec);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:var(--s4);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hero-card:hover{
  border-color:#c9c6bf;
  transform:translateY(-4px);
  box-shadow:var(--sombra-1);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  border:1px solid var(--linea);
  background:var(--sec);
  border-radius:999px;
  padding:6px 14px;
  font-size:.85rem;
  margin-bottom:var(--s3);
}
.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--acento);
  animation:pulso 2.5s ease-out infinite;
}
.sub{
  color:var(--muted);
  font-size:1.125rem;
  margin-bottom:var(--s2);
}
.hero-card-label{
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--muted);
  margin-bottom:var(--s2);
}
.hero-card ul{
  list-style:none;
  padding:0;
  display:grid;
  margin:0 0 var(--s3);
}
.hero-card li{
  display:flex;
  align-items:center;
  gap:var(--s2);
  padding:var(--s2) 0;
  border-top:1px solid var(--linea);
}
.hero-card li:first-child{
  border-top:none;
  padding-top:0;
}
.hero-card li svg{
  color:var(--acento);
  flex-shrink:0;
}
/* Datos en vivo: hora de RD + cuenta del cumple */
.hero-live{
  border-top:1px solid var(--linea);
  padding-top:var(--s3);
  display:grid;
  gap:var(--s1);
}
.hero-live p{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
}
.hero-live time,
.hero-live strong{
  color:var(--texto);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.hero-card-note{
  border-top:1px solid var(--linea);
  padding-top:var(--s3);
  color:var(--muted);
  font-size:.9rem;
}
/* Cinta de stack: tecnologías sin niveles inventados */
.stack-band{
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  background:var(--fondo);
  padding:var(--s3) 0;
}
.stack-inner{
  display:flex;
  align-items:center;
  gap:var(--s4);
  flex-wrap:wrap;
}
.stack-label{
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
  margin:0;
}
.chips{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:var(--s2);
  flex-wrap:wrap;
}
.chips li{
  --cat:var(--texto);
  border:1px solid var(--linea);
  border-radius:999px;
  padding:6px 14px;
  font-size:.85rem;
  font-weight:600;
  background:#fff;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.chips li:hover{
  background:var(--cat);
  color:#fff;
  border-color:var(--cat);
  transform:translateY(-2px);
}
/* Color oficial de cada tecnología (más específico que .chips li para ganar) */
.chips li.t-csharp{--cat:#68217a}
.chips li.t-sql{--cat:#0078d4}
.chips li.t-dotnet{--cat:#512bd4}
.chips li.t-ef{--cat:#0e7c74}
.chips li.t-html{--cat:#e34f26}
.chips li.t-css{--cat:#2965f1}
.chips li.t-js{--cat:#f7df1e}
.chips li.t-js:hover{color:#14110e}
.chips li.t-git{--cat:#f05032}
.chips li.t-docker{--cat:#2496ed}
.chips li.t-unity{--cat:#000}
/* Entrada suave del hero al cargar (escalonada) */
.hero .badge{
  animation:subir .6s ease both;
}
.hero h1{
  animation:subir .6s .1s ease both;
}
.hero .cta-row{
  animation:subir .6s .3s ease both;
}
.hero-card{
  animation:aparecer .6s .35s ease both;
}
/* Máquina de escribir: el subtítulo se escribe solo (lo enciende el JS) */
.sub.typing::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1em;
  background:var(--acento);
  margin-left:2px;
  vertical-align:-2px;
  animation:parpadeo 1s steps(1) infinite;
}
@keyframes parpadeo{
  50%{
    opacity:0;
  }
}
@keyframes subir{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes pulso{
  0%{
    box-shadow:0 0 0 0 rgba(31,31,31,.35);
  }
  70%{
    box-shadow:0 0 0 8px rgba(31,31,31,0);
  }
  100%{
    box-shadow:0 0 0 0 rgba(31,31,31,0);
  }
}

/* ---------- 06. SECCIONES GENÉRICAS ---------- */
.section{
  padding:var(--s7) 0;
}
.section-alt{
  background-color:var(--sec);
  background-image:radial-gradient(var(--linea) 1px,transparent 1px);
  background-size:24px 24px;
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.kicker{
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:var(--s2);
}
.section-sub{
  color:var(--muted);
  margin-bottom:var(--s4);
}
/* Frase destacada: un solo mensaje grande (Von Restorff) */
.frase-band{
  text-align:center;
}
.frase-band .wrap{
  display:grid;
  justify-items:center;
}
.frase{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-size:clamp(1.6rem, 1rem + 3vw, 2.4rem);
  line-height:1.3;
  max-width:22ch;
  margin:0 0 var(--s3);
}
.frase::before{
  content:"\201C";
  display:block;
  font-size:3rem;
  line-height:1;
  color:var(--linea);
  margin-bottom:var(--s2);
}
.frase-autor{
  color:var(--muted);
  font-size:.9rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0;
}

/* ---------- 07. HISTORIA ---------- */
/* Retícula 8+4: contenido + sidebar */
.grid-8-4{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:var(--s3);
  margin-top:var(--s4);
}
.prose h3{
  margin-top:var(--s4);
}
.prose h3:first-child{
  margin-top:0;
}
.prose p{
  margin-bottom:var(--s3);
  color:#2b2926;
}
.side-card{
  background:#fff;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:var(--s4);
  align-self:start;
}
.side-card dl{
  display:grid;
  gap:var(--s2);
}
.side-card dl div{
  display:grid;
  gap:2px;
  border-top:1px solid var(--linea);
  padding-top:var(--s2);
}
.side-card dt{
  display:flex;
  align-items:center;
  gap:var(--s2);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.side-card dt svg{
  color:var(--acento);
  flex-shrink:0;
  transition:transform .2s ease;
}
.side-card dl div:hover dt svg{
  transform:scale(1.2);
}
.side-card dd{
  font-weight:600;
}
.side-card dd a{
  color:inherit;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.side-card dd a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
/* Historia en breve: bloque ancho bajo la retícula 8+4 */
.story{
  margin-top:var(--s5);
}
/* Línea de tiempo: hitos con icono, línea vertical a la izquierda */
.timeline{
  position:relative;
  margin-top:var(--s5);
  display:grid;
  gap:var(--s4);
}
.timeline::before{
  content:"";
  position:absolute;
  left:21px;
  top:8px;
  bottom:8px;
  width:2px;
  background:var(--linea);
}
.t-item{
  position:relative;
  display:grid;
  grid-template-columns:44px 1fr;
  gap:var(--s3);
  align-items:start;
  transition:transform .25s ease;
}
.t-item:hover{
  transform:translateX(4px);
}
.t-dot{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--linea);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--acento);
  position:relative;
  z-index:1;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.t-item:hover .t-dot{
  background:var(--acento);
  border-color:var(--acento);
  color:#fff;
}
/* El mismo círculo en las tarjetas de Gustos (repetición) */
.card .t-dot{
  margin-bottom:var(--s3);
}
.card:hover .t-dot{
  background:var(--cat);
  border-color:var(--cat);
  color:#fff;
}
/* Pastilla "En curso" en verde: lo que está pasando hoy */
.meta-status.now{
  background:#1f7a4d;
  border-color:#1f7a4d;
  color:#fff;
}
.t-date{
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}
.t-item h3{
  margin:var(--s1) 0;
}
.t-text{
  color:var(--muted);
  margin:0;
}
/* Mapa de ruta: pines + arco con etiquetas (estilo callouts) */
.ruta-mapa{
  margin-top:var(--s5);
  background:#fff;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:var(--s4);
}
.ruta-svg{
  width:100%;
  height:auto;
  display:block;
}
.ruta-arco{
  stroke:var(--acento);
  stroke-width:1.8;
  stroke-dasharray:6 6;
  animation:marcha 1.2s linear infinite;
}
/* Países con sus bordes reales (datos geográficos simplificados) */
.pais-forma{
  fill:var(--sec);
  stroke:var(--texto);
  stroke-width:2;
  stroke-linejoin:round;
  transition:fill .25s ease;
}
.ruta-mapa:hover .pais-forma{
  fill:#e7e2d8;
}
/* Divisiones internas: estados y provincias en blanco sobre el gris */
.pais-div{
  fill:none;
  stroke:#fff;
  stroke-width:1.2;
}
.pin{
  stroke-width:2;
}
.pin-origen{
  fill:#fff;
  stroke:var(--acento);
}
.pin-destino{
  fill:var(--acento);
  stroke:var(--acento);
}
.pin-halo{
  fill:none;
  stroke:var(--acento);
  stroke-width:1.5;
  opacity:.6;
  transform-box:fill-box;
  transform-origin:center;
  animation:sonar 2.2s ease-out infinite;
}
.pin-nombre{
  font-family:"Montserrat",sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  fill:var(--muted);
}
.ruta-lados{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s4);
  margin-top:var(--s4);
}
.ruta-lados h3{
  margin:var(--s1) 0;
}
/* Banderas simplificadas (sin escudos, muy pequeñas) */
.bandera{
  border-radius:4px;
  box-shadow:0 0 0 1px var(--linea);
  flex-shrink:0;
}
@keyframes marcha{
  to{
    stroke-dashoffset:-12;
  }
}
@keyframes sonar{
  0%{
    transform:scale(.6);
    opacity:.6;
  }
  100%{
    transform:scale(2.2);
    opacity:0;
  }
}

/* ---------- 08. GUSTOS ---------- */
/* Retícula 4+4+4: 3 tarjetas iguales */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s4);
  margin-top:var(--s4);
}
.card{
  --cat:var(--acento);
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:var(--s4);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* Barrita negra que se dibuja arriba al pasar el mouse */
.card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--cat);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.card:hover::before{
  transform:scaleX(1);
}
/* Color por categoría: rosa K-Dramas, azul gaming, naranja anime, verde viajar, morado leer */
.c-rosa{--cat:#e85c9a}
.c-azul{--cat:#2d6cdf}
.c-naranja{--cat:#f6842c}
.c-verde{--cat:#2f9e5b}
.c-morado{--cat:#7a3fb5}
.card .fav-list li::before{
  color:var(--cat);
}
.card:hover{
  border-color:#c9c6bf;
  transform:translateY(-6px);
  box-shadow:var(--sombra-2);
}
.card h3{
  margin-top:0;
}
.card p{
  color:var(--muted);
}
.edit-hint{
  margin-top:var(--s4);
  font-size:.85rem;
  color:var(--muted);
  border-left:3px solid var(--acento);
  padding-left:var(--s3);
}
/* Listas rankeadas de favoritos (números grandes estilo editorial) */
.fav-list{
  list-style:none;
  counter-reset:fav;
  padding:0;
  display:grid;
  gap:var(--s2);
  margin-top:var(--s3);
}
.fav-list li{
  counter-increment:fav;
  display:flex;
  align-items:baseline;
  gap:var(--s2);
  border-top:1px solid var(--linea);
  padding-top:var(--s2);
}
.fav-list li::before{
  content:counter(fav,decimal-leading-zero);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;
  font-size:var(--text-lg);
  color:var(--acento);
  flex-shrink:0;
}
.fav-list li.empty{
  color:var(--muted);
  font-style:italic;
}

/* ---------- 09. METAS ---------- */
.metas{
  display:grid;
  gap:var(--s4);
  margin-top:var(--s4);
}
.meta{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:var(--s3);
  align-items:start;
  background:#fff;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:var(--s4);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.meta:hover{
  border-color:#c9c6bf;
  transform:translateX(6px);
  box-shadow:var(--sombra-1);
}
.meta-num{
  font-family:"Cormorant Garamond",serif;
  font-size:2rem;
  font-weight:700;
  background:var(--acento);
  color:#fff;
  border-radius:10px;
  text-align:center;
  line-height:64px;
  transition:background .25s ease;
}
.meta:hover .meta-num{
  background:#000;
}
/* Etiqueta de estado: borde = por venir (el verde "En curso" está arriba, junto a las tarjetas) */
.meta-status{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--linea);
  border-radius:999px;
  padding:4px 12px;
  margin:0 0 var(--s2);
}

/* FOOTER */
.final{
  background:radial-gradient(80% 100% at 50% 0%, #262626 0%, #0a0a0a 55%, #000 100%);
  color:#fff;
  padding:var(--s7) 0;
}
.final h2{
  color:#fff;
}
.final p{
  color:#d8d8d8;
}
/* Pantalla dividida: mensaje a la izquierda, formulario a la derecha */
.final-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s4);
  align-items:start;
}
/* Formulario (Clase 03 §7: campo con borde que cambia en focus) */
.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s3);
}
.field{
  display:grid;
  gap:var(--s2);
  align-content:start;
}
.field-full{
  grid-column:1 / -1;
}
.field label{
  color:#fff;
  font-size:.85rem;
  font-weight:600;
}
.field input,
.field textarea{
  font:inherit;
  font-size:1rem;
  color:var(--texto);
  background:#fff;
  border:2px solid transparent;
  border-radius:10px;
  padding:12px 14px;
  width:100%;
}
.field textarea{
  min-height:128px;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{
  color:#a09c95;
}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.25);
}
.form-msg{
  grid-column:1 / -1;
  min-height:1.5em;
  font-size:.9rem;
  margin:0;
}
.form-msg.ok{
  color:#7ddfa4;
}
.form-msg.err{
  color:#ff9d94;
}
.form .btn{
  justify-self:start;
}
/* Copiar email: enlace sutil con confirmación */
.copy-link{
  background:none;
  border:none;
  padding:0;
  margin-top:var(--s3);
  color:#fff;
  font:inherit;
  font-size:.9rem;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.copy-link:hover{
  color:var(--sec);
}
.copy-msg{
  font-size:.85rem;
  color:#7ddfa4;
  min-height:1.5em;
  margin:var(--s1) 0 0;
}
.footer{
  border-top:1px solid var(--linea);
  padding:var(--s6) 0 var(--s4);
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:var(--s4);
  padding-bottom:var(--s4);
}
.footer-brand{
  font-size:var(--text-lg);
  font-weight:700;
  letter-spacing:.08em;
  margin-bottom:var(--s2);
}
.footer-tag{
  color:var(--muted);
  font-size:.9rem;
}
.footer-title{
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:var(--s3);
}
.footer-links{
  list-style:none;
  padding:0;
  display:grid;
  gap:var(--s2);
}
.footer-links a{
  text-decoration:none;
  color:var(--texto);
}
.footer-links a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
/* Botones sociales circulares */
.social{
  display:flex;
  gap:var(--s2);
  margin-bottom:var(--s3);
}
.social a{
  width:44px;
  height:44px;
  border:1px solid var(--linea);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--texto);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.social a:hover{
  background:var(--acento);
  border-color:var(--acento);
  color:#fff;
  transform:translateY(-2px);
}
.footer-bottom{
  border-top:1px solid var(--linea);
  padding-top:var(--s3);
  display:flex;
  justify-content:space-between;
  gap:var(--s3);
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.9rem;
}
.footer-bottom a{
  text-decoration:none;
  color:var(--muted);
}
.footer-bottom a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}


/* ---------- 11. RESPONSIVE ---------- */
/* Tablet: hero mantiene 8+4, gustos pasa a 2 por fila */
@media (max-width:1024px){
  .hero-grid > div:first-child{
    grid-column:span 8;
  }
  .hero-card{
    grid-column:span 4;
  }
  .grid-3{
    grid-template-columns:1fr 1fr;
  }
  .final-inner{
    grid-template-columns:1fr;
  }
}
/* Móvil: todo a 4 cols, 1 por fila + menú hamburguesa */
@media (max-width:640px){
  .wrap{
    padding-left:var(--s3);
    padding-right:var(--s3);
  }
  h1{
    font-size:var(--text-3xl);
  }
  .hero{
    padding:var(--s6) 0;
  }
  .hero-grid,
  .grid-8-4,
  .grid-3{
    grid-template-columns:repeat(4,1fr);
  }
  .hero-grid > div:first-child,
  .hero-card{
    grid-column:span 4;
  }
  .grid-8-4 > *{
    grid-column:span 4;
  }
  .grid-3 > *{
    grid-column:span 4;
  }
  .meta{
    grid-template-columns:48px 1fr;
  }
  .meta-num{
    line-height:48px;
    font-size:1.5rem;
  }
  .form{
    grid-template-columns:1fr;
  }
  .ruta-lados{
    grid-template-columns:1fr;
  }
  .footer-grid{
    grid-template-columns:1fr;
  }
  .nav{
    display:none;
    position:absolute;
    top:64px;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    padding:var(--s3);
    border-bottom:1px solid var(--linea);
    box-shadow:var(--sombra-1);
  }
  .nav.open{
    display:flex;
  }
  .nav a{
    padding:12px 4px;
    min-height:44px;
  }
  .menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

/* ---------- 12. MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
  *{
    transition:none !important;
    animation:none !important;
  }
}

/* ---------- 13. ENTRADAS AL HACER SCROLL ---------- */
/* Los bloques aparecen solos al entrar en pantalla.
   Solo donde el navegador lo soporta; si no, todo se ve estático y normal. */
@keyframes aparecer{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}
@supports (animation-timeline:view()){
  .section .kicker,
  .section h2,
  .story,
  .frase{
    animation:subir .6s ease both;
    animation-timeline:view();
    animation-range:entry 0% cover 25%;
  }
  .card,
  .meta,
  .t-item,
  .ruta-mapa{
    animation:aparecer .6s ease both;
    animation-timeline:view();
    animation-range:entry 0% cover 25%;
  }
}