/* =========================================================
   KOSTA — Design tokens
   ========================================================= */
:root{
  --ink:        #14140F;
  --ink-soft:   #3A3A32;
  --paper:      #F6F4EC;
  --paper-alt:  #EEEAE0;
  --stone:      #8B8778;
  --stone-text: #6B6759;  /* versión de --stone para texto pequeño: 5,1:1 sobre --paper, 5,7:1 sobre blanco (AA) */
  --line:       #DBD6C8;
  --accent:     #3C4A3E;
  --accent-soft:#E4E9E1;
  --white:      #FFFFFF;

  --logo-h:     42px;     /* altura del logo en la cabecera (escritorio) */

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
  --gutter: clamp(24px, 5vw, 64px);

  --radius-sm: 3px;
  --radius-md: 6px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

ul, ol{ margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
}

p{ margin: 0; }

button{ font-family: inherit; cursor: pointer; }

input, select, textarea{
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
}

.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 200;
  border-radius: var(--radius-sm);
}
.skip-link:focus{
  left: 16px;
  top: 16px;
}

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* =========================================================
   Layout helpers
   ========================================================= */
.section{
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(72px, 11vw, 128px) var(--gutter);
}

.section--alt{
  max-width: none;
  background: var(--paper-alt);
}
.section--alt > *{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.section-head{
  max-width: 620px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.section-title{
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  margin-bottom: 18px;
}

.section-lead{
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 46ch;
}

/* Scroll reveal.
   La aparición usa la propiedad individual `translate`, no `transform`, para no
   pisar los transform propios de cada tarjeta (elevación de la destacada, hover
   de proyectos). Va antes de los componentes para que estos puedan ampliar su
   `transition` sin que `.reveal` la sobrescriba. */
.reveal{
  opacity: 0;
  translate: 0 18px;
  transition: opacity .7s var(--ease), translate .7s var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  translate: 0 0;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
}

.btn-primary{
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover{
  background: var(--accent);
  transform: translateY(-1px);
}

.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover{
  background: var(--ink);
  color: var(--paper);
}

.btn-whatsapp{
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  gap: 10px;
}
.btn-whatsapp:hover{
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.wa-icon{
  display: inline-flex;
  color: var(--accent);
}

/* Con nowrap, los botones de texto largo ("Preguntar por mantenimiento")
   se salían de su tarjeta en pantallas estrechas. */
@media (max-width: 560px){
  .btn{ white-space: normal; text-align: center; }
}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 244, 236, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo{
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

/* Logo en imagen: se fija la ALTURA y el ancho sale proporcional, así nunca se
   deforma. El margen vertical negativo compensa la diferencia con la altura de
   línea del logo en texto (2.24rem), de modo que la cabecera mide lo mismo
   (~77px) con cualquier valor de --logo-h. Para ajustar el tamaño, basta con
   cambiar --logo-h en :root (escritorio) o en el bloque de ≤860px (móvil). */
.logo img,
img.logo{
  display: block;
  height: var(--logo-h);
  width: auto;
  max-width: none;
  object-fit: contain;
  margin-block: calc((2.24rem - var(--logo-h)) / 2);
}

.nav-desktop{
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 0.95rem;
}

.nav-desktop a{
  position: relative;
  padding: 4px 0;
}

.nav-desktop a:not(.nav-cta)::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-desktop a:not(.nav-cta):hover::after{
  transform: scaleX(1);
}

/* Va con `.nav-desktop` delante para ganar en especificidad a `.nav-desktop a`
   (padding: 4px 0), que antes anulaba el padding de este botón y dejaba el texto
   pegado al borde. 4px de alto mantiene la altura del header; 18px a los lados. */
.nav-desktop .nav-cta{
  border: 1px solid var(--ink);
  padding: 4px 18px;
  border-radius: var(--radius-sm);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.nav-cta:hover{
  background: var(--ink);
  color: var(--paper);
}

.menu-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0 6px;
  /* Área táctil de 44px sin cambiar la altura del header ni el tamaño/posición de las rayas */
  margin: -6px -6px -6px 0;
}
.menu-toggle span{
  display: block;
  height: 1px;
  width: 100%;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

.menu-movil{
  display: none;
  flex-direction: column;
  padding: 8px var(--gutter) 28px;
  border-top: 1px solid var(--line);
}
.menu-movil a{
  padding: 14px 0;
  font-size: 1.15rem;
  font-family: var(--font-display);
  border-bottom: 1px solid var(--line);
}
.menu-movil a:last-child{ border-bottom: none; }

@media (max-width: 860px){
  :root{ --logo-h: 36px; }
  .nav-desktop{ display: none; }
  .menu-toggle{ display: flex; }
  /* Solo se muestra abierto en móvil: si se ensancha la ventana con el menú
     abierto (p. ej. al girar una tableta) no queda colgado en escritorio. */
  .menu-movil.is-open{ display: flex; }
  /* Si el menú abierto no cabe en pantalla (móvil en horizontal), el header
     hace scroll por dentro en vez de dejar enlaces inalcanzables. */
  .site-header{
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 96px) var(--gutter) clamp(80px, 10vw, 120px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.hero-kicker{
  font-size: 0.95rem;
  color: var(--stone-text);
  margin-bottom: 22px;
}

.hero-title{
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  max-width: 13ch;
  /* Reparte las palabras por igual entre líneas: sin palabras sueltas ("web",
     "altura.") a ninguna anchura. El <br> del HTML se ignora porque, con 13ch de
     ancho, forzaba cortes que dejaban una palabra huérfana. */
  text-wrap: balance;
  opacity: 0;
  transform: translateY(14px);
  animation: rise .8s var(--ease) forwards .05s;
}
.hero-title br{ display: none; }

.hero-text{
  margin-top: 26px;
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 42ch;
  opacity: 0;
  transform: translateY(14px);
  animation: rise .8s var(--ease) forwards .2s;
}

.hero-actions{
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  opacity: 0;
  transform: translateY(14px);
  animation: rise .8s var(--ease) forwards .35s;
}

@keyframes rise{
  to{ opacity: 1; transform: translateY(0); }
}

.hero-visual{
  opacity: 0;
  animation: fadein 1s var(--ease) forwards .45s;
}
@keyframes fadein{ to{ opacity: 1; } }

.hero-frame{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(20, 20, 15, 0.25);
  transform: rotate(1.2deg);
}

.hero-frame-bar{
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.hero-frame-bar span{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.hero-frame-body{
  padding: 28px 26px 40px;
}

.hf-line{
  height: 10px;
  border-radius: 2px;
  background: var(--paper-alt);
  margin-bottom: 12px;
}
.hf-line-1{ width: 60%; height: 16px; background: var(--ink); opacity: 0.9; }
.hf-line-2{ width: 40%; }
.hf-block{
  height: 90px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  margin: 22px 0;
}
.hf-line-3{ width: 85%; }
.hf-line-4{ width: 55%; }

/* En una sola columna, .hero-visual no tiene contenido con ancho propio
   (las líneas del mockup son porcentajes), así que con margin auto se
   encogía a ~66px. Se le da el ancho del contenedor con un máximo, y se
   deja debajo del texto para no empujar título y botones hacia abajo. */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .hero-visual{ width: 100%; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 560px){
  .hero-frame-body{ padding: 22px 20px 28px; }
  .hf-block{ height: 72px; margin: 18px 0; }
}

/* =========================================================
   Servicios / pricing
   ========================================================= */
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.price-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.price-card--featured{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-14px);
}

.price-tag{
  font-size: 0.8rem;
  color: var(--stone-text);
  margin-bottom: 14px;
}
.price-card--featured .price-tag{
  color: #B9BEB2;
}

.price-name{
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.price-value{
  font-family: var(--font-display);
  font-size: 2.4rem;
  margin-bottom: 16px;
}
.price-value span{
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--stone-text);
  margin-left: 8px;
  font-weight: 500;
}
.price-card--featured .price-value span{
  color: #B9BEB2;
}

.price-desc{
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin-bottom: 24px;
}
.price-card--featured .price-desc{
  color: #D8DBD1;
}

.price-list{
  margin-bottom: 30px;
  flex-grow: 1;
}
.price-list li{
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.price-list li:last-child{ border-bottom: 1px solid var(--line); }
.price-card--featured .price-list li{
  border-top-color: #3F4A3D;
}
.price-card--featured .price-list li:last-child{
  border-bottom-color: #3F4A3D;
}

.price-actions{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.price-link{
  align-self: flex-start;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink);
  font-weight: 500;
  transition: opacity .2s var(--ease);
}
.price-link:hover{ opacity: 0.65; }
.price-link--dark{
  color: var(--paper);
  border-bottom-color: var(--paper);
}

.price-wa{
  font-size: 0.85rem;
  color: var(--stone-text);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.price-wa:hover{
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.price-wa--dark{
  color: #B9BEB2;
}
.price-wa--dark:hover{
  color: var(--paper);
  border-bottom-color: var(--paper);
}

.pricing-note{
  margin-top: 28px;
  color: var(--stone-text);
  font-size: 0.9rem;
}

@media (max-width: 860px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .price-card--featured{ transform: none; }
}

/* =========================================================
   Qué incluye
   ========================================================= */
.includes-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.includes-item{
  padding: 30px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.includes-item h3{
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.includes-item p{
  color: var(--ink-soft);
  font-size: 0.92rem;
}

@media (max-width: 960px){
  .includes-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .includes-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Proceso
   ========================================================= */
.process-list{
  max-width: 760px;
}

.process-item{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.process-item:last-child{
  border-bottom: 1px solid var(--line);
}

.process-number{
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--stone);
}

.process-body h3{
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.process-body p{
  color: var(--ink-soft);
  max-width: 50ch;
}

@media (max-width: 560px){
  .process-item{ grid-template-columns: 44px 1fr; }
}

/* =========================================================
   Proyectos
   ========================================================= */
.projects-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.project-card{
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Incluye la aparición (.reveal) además del hover, porque esta regla la sustituye */
  transition: opacity .7s var(--ease), translate .7s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}

.project-demo-tag{
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 0.72rem;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 10px;
  border-radius: 20px;
  z-index: 2;
}

.project-image-wrapper{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--paper-alt);
  border-bottom: 1px solid var(--line);
}

.project-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s var(--ease);
}

/* El hover solo se aplica con puntero que lo soporta: en táctil `:hover` se queda
   "pegado" tras tocar y la tarjeta quedaría levantada. Es un detalle visual: el
   enlace "Ver proyecto →" y el resto de información están siempre visibles. */
@media (hover: hover){
  .project-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 40px -28px rgba(20,20,15,0.3);
  }
  .project-card:hover .project-img{
    transform: scale(1.04);
  }
}

.project-info{
  padding: 22px 22px 26px;
}

.project-category{
  font-size: 0.82rem;
  color: var(--stone-text);
  margin-bottom: 6px;
}

.project-name{
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.project-desc{
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 16px;
}

.project-link{
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: opacity .2s var(--ease);
}
.project-link:hover{ opacity: 0.65; }

.project-link--soon{
  color: var(--stone);
  border-bottom-color: var(--line);
  cursor: default;
}

@media (max-width: 960px){
  .projects-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Sobre Kosta
   ========================================================= */
.about-grid{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 6vw, 80px);
}

.about-title{
  align-self: start;
}

.about-text p{
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 58ch;
  margin-bottom: 22px;
}
.about-text p:last-child{ margin-bottom: 0; }

@media (max-width: 800px){
  .about-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Mantenimiento
   ========================================================= */
.maintenance-card{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 6vw, 60px);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(32px, 5vw, 56px);
}

.maintenance-text p{
  color: var(--ink-soft);
  margin-top: 16px;
  max-width: 52ch;
}

.maintenance-features{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.maintenance-features li{
  position: relative;
  padding-left: 18px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.maintenance-features li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.maintenance-fine{
  font-size: 0.9rem;
  color: var(--stone-text) !important;
}

.maintenance-price{
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}

.maintenance-value{
  font-family: var(--font-display);
  font-size: 3rem;
}
.maintenance-value span{
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--stone-text);
  margin-left: 6px;
}

@media (max-width: 760px){
  .maintenance-card{ grid-template-columns: 1fr; text-align: left; }
  .maintenance-price{ align-items: flex-start; text-align: left; }
}

/* =========================================================
   Contacto
   ========================================================= */
.contact-grid{
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(32px, 6vw, 72px);
}

.form-row{
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-row--split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-row--split > div{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-row label{
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.form-row input,
.form-row select,
.form-row textarea{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  transition: border-color .2s var(--ease);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  border-color: var(--ink);
}

.form-row textarea{ resize: vertical; }

.btn-submit{
  margin-top: 6px;
  border: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.form-honeypot{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.btn-submit:disabled{
  opacity: 0.7;
  cursor: default;
}

.btn-submit.is-loading .btn-submit-label{
  opacity: 0.85;
}

.btn-submit.is-loading::after{
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(246,244,236,0.35);
  border-top-color: var(--paper);
  animation: spin 0.7s linear infinite;
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

.form-note{
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--stone-text);
  max-width: 48ch;
  min-height: 1.2em;
}

.form-note--success{
  color: var(--accent);
}

.form-note--error{
  color: #8C4A3B;
}

.form-note--error a{
  color: inherit;
  border-bottom: 1px solid currentColor;
}

.contact-aside{
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 4px;
}

.contact-aside-block h3{
  font-size: 1rem;
  margin-bottom: 10px;
}

.contact-link{
  font-size: 1.05rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

.contact-aside-block p{
  color: var(--ink-soft);
  max-width: 36ch;
}

@media (max-width: 840px){
  .contact-grid{ grid-template-columns: 1fr; }
  .form-row--split{ grid-template-columns: 1fr; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  border-top: 1px solid var(--line);
  background: var(--ink);
  color: var(--paper);
}

.footer-top{
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px var(--gutter) 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}

.footer-logo{
  font-family: var(--font-display);
  font-size: 1.4rem;
}

.footer-tagline{
  color: #B9BEB2;
  margin-top: 8px;
  font-size: 0.92rem;
}

.footer-nav{
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.92rem;
}
.footer-nav a{
  color: #D8DBD1;
  transition: color .2s var(--ease);
}
.footer-nav a:hover{ color: var(--paper); }

.footer-contact{
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.footer-contact > a{
  font-size: 0.95rem;
  border-bottom: 1px solid #3F4A3D;
  padding-bottom: 2px;
}

.footer-social{
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  color: #B9BEB2;
}
.footer-social a:hover{ color: var(--paper); }

.footer-bottom{
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px var(--gutter) 32px;
  border-top: 1px solid #2A2F26;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: #9A9E8F;
}

.footer-legal{
  display: flex;
  gap: 18px;
}
.footer-legal a:hover{ color: var(--paper); }

@media (max-width: 720px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* =========================================================
   Privacidad y enlaces legales (añadido en la fase de analítica/legal)
   ========================================================= */
.form-privacy{
  margin: 0 0 20px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--stone-text);
  max-width: 56ch;
}
.form-privacy a{
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}

/* Marcador de dato legal pendiente: muy visible a propósito. Se elimina al completar el dato. */
.legal-todo{
  background: #FFF1B8;
  color: #4A3800;
  padding: 0 4px;
  border-radius: 2px;
  font-weight: 500;
}

.footer-legal{ flex-wrap: wrap; }
.footer-legal-btn{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.footer-legal-btn:hover{ color: var(--paper); }
.footer-legal a:focus-visible,
.footer-legal-btn:focus-visible{ outline-color: var(--paper); }