/* ============================================================
   Habita Condominios — hoja de estilos del sitio
   Manual de marca v1.0 (agosto 2026)

   Proporciones de color: blanco hueso ~75%, azul petróleo ~15%,
   terracota ~5%, gris piedra ~5%.

   Regla crítica del manual: el terracota #C47A5A NUNCA va en texto
   (3,16:1 no alcanza contraste). Para texto se usa el terracota
   profundo #A85436, que cumple AA con 4,97:1.
   ============================================================ */

/* ---------- Tipografía ----------
   Jost en todo el sitio, auto-hospedada desde fonts/: misma 'a' de un solo
   piso que Century Gothic, autorizada por el manual para uso web.
   Century Gothic queda solo de respaldo. En documentos Word se usa al revés. */

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  --hueso: #FAF8F5;
  --blanco: #FFFFFF;
  --petroleo: #1F4E5F;
  --petroleo-claro: #2C6A80;
  --terracota: #C47A5A;          /* solo planos y elementos gráficos */
  --terracota-texto: #A85436;    /* texto de acento, enlaces, cifras */
  --pizarra: #5E6A6F;            /* texto secundario */
  --piedra: #C8C6C2;             /* solo líneas y bordes */
  --grafito: #2F3437;            /* texto corrido */

  /* Jost primero, igual que la tarjeta digital y la firma de correo.
     El manual (sección 07) la autoriza expresamente para web; Century Gothic
     queda de respaldo por si la fuente no llegara a cargar. */
  --titulo: 'Jost', 'Century Gothic', 'Questrial', sans-serif;
  /* Variante A, elegida el 23-09-2026: Jost también en los párrafos, como la
     tarjeta digital. Se ve igual en todos los aparatos porque viaja con el sitio. */
  --cuerpo: 'Jost', 'Century Gothic', sans-serif;

  --ancho: 1120px;
  --ancho-texto: 68ch;
  --radio: 12px;
  --transicion: .2s ease;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--hueso);
  color: var(--grafito);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
}

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

/* «La elegancia la produce el interletrado, no el peso» (manual, sección 07):
   los títulos grandes van livianos y con tracking abierto, como el logotipo
   de la tarjeta digital. */
h1, h2, h3, h4 {
  font-family: var(--titulo);
  color: var(--petroleo);
  font-weight: 400;
  line-height: 1.22;
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 300; letter-spacing: .02em; }
h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 300; letter-spacing: .015em; }
h3 { font-size: 1.12rem; font-weight: 500; letter-spacing: .01em; }

p { margin: 0 0 1em; max-width: var(--ancho-texto); }

a { color: var(--terracota-texto); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--terracota); }

:focus-visible {
  outline: 3px solid var(--terracota-texto);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.seccion { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.seccion--blanca { background: var(--blanco); }
.seccion--ajustada { padding-top: clamp(2rem, 4vw, 3rem); }

/* Etiqueta: Century Gothic Bold, tracking .18em, terracota profundo */
.etiqueta {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracota-texto);
  margin: 0 0 .9rem;
}

.bajada { font-size: 1.1rem; line-height: 1.62; color: var(--pizarra); max-width: 60ch; }
.nota { font-size: .88rem; color: var(--pizarra); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--titulo);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .02em;
  min-height: 50px;
  padding: .8rem 1.7rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transicion);
}
.btn--principal { background: var(--petroleo); color: var(--blanco); }
.btn--principal:hover { background: var(--petroleo-claro); }
.btn--secundario { background: transparent; color: var(--petroleo); border-color: var(--petroleo); }
.btn--secundario:hover { background: var(--petroleo); color: var(--blanco); }
.btn--claro { background: var(--blanco); color: var(--petroleo); }
.btn--claro:hover { background: var(--hueso); }
.btn--bloque { width: 100%; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

.acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 248, 245, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--piedra);
  transition: box-shadow .25s ease;
}
.cabecera[data-desplazado="true"] { box-shadow: 0 4px 22px rgba(31, 78, 95, .08); }
/* La cabecera usa un ancho mayor que el contenido: seis secciones, «Cambiar a Habita»
   y el botón no caben en 1120 px sin partirse en dos líneas. */
.cabecera__fila {
  display: flex; align-items: center; gap: 1.2rem; min-height: 80px;
  width: min(100% - 2.5rem, 1260px);
}

/* El logo nunca se comprime: el manual prohíbe deformarlo. Si falta espacio,
   la cabecera pasa al menú desplegable en vez de achicarlo. */
.marca { display: flex; align-items: center; margin-right: auto; text-decoration: none; flex-shrink: 0; }
/* Medidas enteras: con 190 px el alto daba 70,93 y el logo quedaba en medio píxel, borroso */
.marca img { width: 212px; height: 50px; max-width: none; }

.nav { display: flex; align-items: center; gap: .95rem; }
.nav a {
  font-family: var(--titulo);
  font-size: .86rem;
  color: var(--grafito);
  text-decoration: none;
  white-space: nowrap;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.cabecera__cta {
  flex-shrink: 0; white-space: nowrap;
  min-height: 44px; padding: .6rem 1.3rem; font-size: .9rem;
}
.nav a:hover { color: var(--terracota-texto); }
.nav a[aria-current="page"] { color: var(--petroleo); border-bottom-color: var(--terracota); }
.nav .nav__destacado { color: var(--terracota-texto); font-weight: 600; }
/* El botón dentro del menú solo existe para pantallas angostas; en escritorio
   la llamada a la acción vive fuera del nav, como .cabecera__cta */
.nav .btn { display: none; }

.nav-boton {
  display: none; width: 48px; height: 48px; flex: none;
  background: transparent; border: 1.5px solid var(--piedra);
  border-radius: 10px; cursor: pointer; color: var(--petroleo);
  place-items: center; transition: var(--transicion);
}
.nav-boton:hover { border-color: var(--terracota); }
.nav-boton svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.nav-boton .icono-cerrar { display: none; }
.nav-boton[aria-expanded="true"] .icono-menu { display: none; }
.nav-boton[aria-expanded="true"] .icono-cerrar { display: block; }

/* Medido: la cabecera completa necesita 1276 px de pantalla. Bajo eso, menú desplegable */
@media (max-width: 1275px) {
  .cabecera__cta { display: none; }
  .nav-boton { display: grid; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--hueso);
    border-bottom: 1px solid var(--piedra);
    padding: .4rem 0 1rem;
    box-shadow: 0 12px 28px rgba(31, 78, 95, .1);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .nav[data-abierto="true"] { display: flex; }
  .nav a {
    padding: .95rem clamp(1.25rem, 5vw, 2rem);
    font-size: 1rem;
    border-bottom: 1px solid rgba(200, 198, 194, .5);
  }
  .nav a[aria-current="page"] { border-bottom-color: rgba(200, 198, 194, .5); }
  .nav .btn {
    display: inline-flex;
    margin: 1rem clamp(1.25rem, 5vw, 2rem) 0;
    width: auto;
  }
}
@media (max-width: 460px) {
  .marca img { width: auto; height: 40px; }
}

/* ---------- Portada de página ---------- */
.portada { padding: clamp(2.8rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; }
.portada__contenido { max-width: 46rem; position: relative; z-index: 1; }
.portada h1 span { display: block; color: var(--terracota-texto); }

/* Marca de agua en la portada de cada página, siempre completa: se alinea al
   borde derecho del contenido en vez de salirse de la pantalla. El manual
   reserva este uso al isotipo solo, nunca al bloque con las palabras. */
/* El texto de la portada va centrado en 46rem: la marca vive en el margen libre
   de la derecha, a 2,5rem del texto, y nunca pasa por detrás de las letras. */
.portada {
  --libre: calc((100% - 46rem) / 2);
  --marca: min(300px, calc(var(--libre) - 3.75rem));
}
.portada::after {
  content: "";
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--marca); aspect-ratio: 134 / 110;
  right: max(1.25rem, calc(var(--libre) - var(--marca) - 2.5rem));
  background: url('../img/habita-isotipo.svg') center / contain no-repeat;
  opacity: .07; pointer-events: none;
}
/* Bajo 1100 px el margen libre es muy angosto: la marca quedaría diminuta */
@media (max-width: 1100px) { .portada::after { display: none; } }
.para-quien {
  margin-top: 1.6rem; padding: 1rem 1.2rem;
  background: var(--blanco); border: 1px solid var(--piedra);
  border-radius: var(--radio); font-size: .95rem; color: var(--pizarra);
  max-width: 58ch;
}
.para-quien strong { color: var(--petroleo); font-family: var(--titulo); }

/* ---------- Franja de prueba ---------- */
.franja { background: var(--petroleo); color: #DCE9ED; }
.franja__grilla {
  display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding: 2.2rem 0;
}
.franja__item { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; }
/* Iconos del Kit de Marca en su versión blanco hueso, la que el kit indica sobre petróleo */
.franja__item img { width: 22px; height: 22px; flex: none; margin-top: .1rem; }

/* ---------- Tarjetas ---------- */
.grilla { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 2.3rem; }
.grilla--dos { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--piedra);
  border-radius: var(--radio);
  padding: 1.7rem 1.6rem;
}
.seccion--blanca .tarjeta { background: var(--hueso); }
.tarjeta h3 { margin-bottom: .5rem; }
.tarjeta p { margin: 0; font-size: .96rem; color: var(--pizarra); max-width: none; }
.tarjeta__numero {
  font-family: var(--titulo); font-size: .75rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--terracota-texto); display: block; margin-bottom: .5rem;
}

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.lista li { position: relative; padding-left: 1.6rem; color: var(--pizarra); max-width: var(--ancho-texto); }
.lista li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--terracota);
}
.lista--pasos { counter-reset: paso; }
.lista--pasos li { padding-left: 2.4rem; }
.lista--pasos li::before {
  counter-increment: paso; content: counter(paso);
  width: 26px; height: 26px; top: -.05em; border-radius: 50%;
  background: var(--petroleo); color: var(--blanco);
  font-family: var(--titulo); font-size: .82rem; font-weight: 600;
  display: grid; place-items: center;
}

/* ---------- Definiciones (reemplazan tablas: apilan solas en móvil) ---------- */
.definiciones { display: grid; gap: 0; margin: 2rem 0 0; border-top: 1px solid var(--piedra); }
.definiciones__fila {
  display: grid; gap: .3rem 2rem;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--piedra);
}
.definiciones__termino {
  font-family: var(--titulo); font-weight: 600; font-size: .98rem;
  color: var(--petroleo); margin: 0;
}
.definiciones__detalle { margin: 0; color: var(--pizarra); font-size: .97rem; max-width: none; }
@media (max-width: 720px) {
  .definiciones__fila { grid-template-columns: 1fr; padding: .95rem 0; }
}

/* ---------- Comparación antes / después ---------- */
.comparacion { display: grid; gap: 1rem; margin-top: 2.2rem; }
.comparacion__fila {
  background: var(--blanco); border: 1px solid var(--piedra);
  border-radius: var(--radio); overflow: hidden;
  display: grid; grid-template-columns: minmax(140px, .8fr) 1fr 1fr;
}
.seccion--blanca .comparacion__fila { background: var(--hueso); }
.comparacion__area {
  padding: 1.1rem 1.2rem; background: var(--petroleo); color: var(--blanco);
  font-family: var(--titulo); font-weight: 600; font-size: .97rem;
  display: flex; align-items: center;
}
.comparacion__celda { padding: 1.1rem 1.2rem; font-size: .95rem; }
.comparacion__celda + .comparacion__celda { border-left: 1px solid var(--piedra); }
.comparacion__etiqueta {
  display: block; font-family: var(--titulo); font-weight: 600;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: .3rem;
}
.comparacion__antes { color: var(--pizarra); }
.comparacion__antes .comparacion__etiqueta { color: var(--pizarra); }
.comparacion__con { color: var(--grafito); }
.comparacion__con .comparacion__etiqueta { color: var(--terracota-texto); }
@media (max-width: 780px) {
  .comparacion__fila { grid-template-columns: 1fr; }
  .comparacion__celda + .comparacion__celda { border-left: none; border-top: 1px solid var(--piedra); }
}

/* ---------- Método HABITA ---------- */
.metodo { display: grid; gap: 1rem; margin-top: 2.3rem; }
.metodo__etapa {
  display: grid; grid-template-columns: 58px 1fr; gap: 1.2rem;
  align-items: start; padding: 1.2rem; background: var(--blanco);
  border: 1px solid var(--piedra); border-radius: var(--radio);
}
.seccion--blanca .metodo__etapa { background: var(--hueso); }
.metodo__letra {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--petroleo); color: var(--blanco);
  font-family: var(--titulo); font-size: 1.5rem; font-weight: 400;
  display: grid; place-items: center;
}
.metodo__etapa h3 { margin: .3rem 0 .45rem; }
.metodo__etapa p { margin: 0; color: var(--pizarra); font-size: .96rem; max-width: none; }
.metodo__recibe {
  margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid var(--piedra);
  font-size: .92rem;
}
.metodo__recibe strong {
  display: block; font-family: var(--titulo); font-weight: 600;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracota-texto); margin-bottom: .2rem;
}

.diagrama { margin-top: 2.4rem; }
/* El diagrama va escrito dentro de la página (no como <img>) para que use la Jost del sitio */
.diagrama svg { display: block; width: 100%; height: auto; border: 1px solid var(--piedra); border-radius: var(--radio); background: var(--blanco); }
.diagrama .movil { display: none; }
@media (max-width: 860px) {
  .diagrama .escritorio { display: none; }
  .diagrama .movil { display: block; }
}

/* ---------- Bloque destacado ---------- */
.destacado {
  background: var(--petroleo); color: #DCE9ED;
  border-radius: var(--radio); padding: clamp(1.8rem, 4vw, 2.8rem);
  margin-top: 2.2rem;
}
.destacado h2, .destacado h3 { color: var(--blanco); }
.destacado p { color: #D5E3E7; }
.destacado .etiqueta { color: #E3B49C; }

.cita {
  border-left: 3px solid var(--terracota);
  padding-left: 1.3rem; margin: 1.8rem 0;
  font-size: 1.1rem; color: var(--petroleo);
  font-family: var(--titulo);
  max-width: 54ch;
}

/* ---------- Preguntas frecuentes ---------- */
.faq { margin-top: 2rem; border-top: 1px solid var(--piedra); }
.faq details { border-bottom: 1px solid var(--piedra); }
.faq summary {
  cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-family: var(--titulo); font-weight: 600; font-size: 1.02rem;
  color: var(--petroleo); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 1.45rem;
  width: 11px; height: 11px;
  border-right: 2px solid var(--terracota-texto);
  border-bottom: 2px solid var(--terracota-texto);
  transform: rotate(45deg); transition: transform var(--transicion);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.faq details p { padding: 0 0 1.2rem; margin: 0; color: var(--pizarra); font-size: .98rem; }

/* ---------- Equipo ---------- */
.socios { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 2.3rem; }
.socio {
  background: var(--blanco); border: 1px solid var(--piedra);
  border-radius: var(--radio); overflow: hidden;
}
.seccion--blanca .socio { background: var(--hueso); }
/* Retratos en tamaño contenido (revisión del 23-09-2026): la ficha la protagoniza
   el texto. Recorte 4:5 con la cara en el tercio superior. */
.socio__foto {
  display: block; width: 200px; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: center 18%; background: var(--piedra);
  margin: 1.6rem 1.6rem 0; border-radius: 10px;
}
.socio__cuerpo { padding: 1.6rem; }
.socio__nombre { margin: 0 0 .15rem; font-size: 1.25rem; }
.socio__cargo {
  font-family: var(--titulo); font-weight: 600; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracota-texto); display: block; margin-bottom: 1rem;
}
.socio__dato { margin: 0 0 .8rem; font-size: .95rem; color: var(--pizarra); max-width: none; }
.socio__dato strong { color: var(--grafito); font-family: var(--titulo); font-weight: 600; }
.socio__enlace {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .5rem; font-family: var(--titulo); font-weight: 600;
  font-size: .88rem; text-decoration: none;
}
.socio__enlace svg { width: 17px; height: 17px; fill: currentColor; }
.socio__enlace:hover { text-decoration: underline; }

/* ---------- Formulario ---------- */
.formulario {
  background: var(--blanco); border: 1px solid var(--piedra);
  border-radius: var(--radio); padding: clamp(1.5rem, 3vw, 2.2rem);
  max-width: 44rem;
}
.campo { margin-bottom: 1.15rem; }
.campo label {
  display: block; font-family: var(--titulo); font-weight: 600;
  font-size: .85rem; color: var(--petroleo); margin-bottom: .4rem;
}
.campo input, .campo select, .campo textarea {
  width: 100%; font-family: var(--cuerpo); font-size: 1rem;
  color: var(--grafito); background: var(--hueso);
  border: 1.5px solid var(--piedra); border-radius: 9px;
  padding: .8rem .9rem; min-height: 50px;
  transition: var(--transicion);
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--petroleo); outline: none;
  box-shadow: 0 0 0 3px rgba(31, 78, 95, .12);
}
.campo--dos { display: grid; gap: 1.15rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .campo--dos { grid-template-columns: 1fr; } }
.campo--consentimiento { display: flex; gap: .7rem; align-items: flex-start; }
.campo--consentimiento input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: .15rem; }
.campo--consentimiento label { font-family: var(--cuerpo); font-weight: 400; font-size: .92rem; color: var(--pizarra); margin: 0; }
.campo--miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso {
  margin-top: 1.1rem; padding: .9rem 1.1rem; border-radius: 9px;
  font-size: .95rem; border: 1.5px solid; display: none;
}
.aviso[data-estado="ok"] { display: block; background: rgba(31,78,95,.07); border-color: var(--petroleo); color: var(--petroleo); }
.aviso[data-estado="error"] { display: block; background: rgba(168,84,54,.08); border-color: var(--terracota-texto); color: var(--terracota-texto); }

/* ---------- Datos de contacto ---------- */
.datos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
.dato { display: flex; gap: 1rem; align-items: flex-start; }
/* El kit prohíbe poner los iconos dentro de un bloque de color: la marca es de línea */
.dato__icono { width: 28px; height: 28px; flex: none; margin-top: .1rem; }
.dato__icono img { width: 28px; height: 28px; }
.dato__titulo {
  font-family: var(--titulo); font-weight: 600; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracota-texto); margin: 0 0 .2rem;
}
.dato p { margin: 0; font-size: .98rem; max-width: none; }

/* ---------- Pie de página ---------- */
.pie { background: var(--petroleo); color: #C5D8DE; padding: 3rem 0 2rem; font-size: .92rem; }
.pie__grilla {
  display: grid; gap: 2.2rem;
  grid-template-columns: minmax(240px, 1.2fr) 1fr 1fr;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 820px) { .pie__grilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__grilla { grid-template-columns: 1fr; } }
.pie img { width: 221px; height: 52px; margin-bottom: 1rem; }
.pie h3 {
  color: var(--blanco); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .9rem;
}
.pie p { color: #C5D8DE; max-width: 40ch; }
.pie a { color: var(--blanco); text-decoration-color: rgba(255,255,255,.35); }
.pie a:hover { text-decoration-color: var(--terracota); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pie__redes { display: flex; gap: .8rem; margin-top: 1.1rem; }
.pie__redes a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,.1); }
.pie__redes svg { width: 18px; height: 18px; fill: currentColor; }
.pie__redes a:hover { background: var(--terracota); }
.pie__legal { padding-top: 1.6rem; font-size: .86rem; color: #A9C2CA; }
.pie__legal p { color: #A9C2CA; max-width: 78ch; margin-bottom: .5rem; }

/* ---------- Chat flotante ---------- */
.chat-boton {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 60px; height: 60px; border-radius: 50%; border: none;
  cursor: pointer; background: var(--petroleo); color: var(--blanco);
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(47,52,55,.28);
  transition: var(--transicion);
}
.chat-boton:hover { background: var(--petroleo-claro); transform: scale(1.05); }
.chat-boton svg { width: 28px; height: 28px; fill: currentColor; }
.chat-boton .icono-cerrar { display: none; }
.chat-boton[aria-expanded="true"] .icono-chat { display: none; }
.chat-boton[aria-expanded="true"] .icono-cerrar { display: block; }

.chat-panel {
  position: fixed; right: 20px; bottom: 92px; z-index: 80;
  width: min(360px, calc(100vw - 40px));
  max-height: calc(100vh - 124px); overflow-y: auto;
  background: var(--hueso); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(47,52,55,.25);
  display: none;
}
.chat-panel[data-abierto="true"] { display: block; animation: subir .22s ease; }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.chat-panel__cabecera {
  background: var(--petroleo); color: var(--blanco);
  padding: 1.1rem 1.2rem; position: sticky; top: 0;
}
.chat-panel__cabecera strong { font-family: var(--titulo); font-size: .98rem; display: block; }
.chat-panel__cabecera span { font-size: .78rem; color: #A9CDD7; }
.chat-panel__cuerpo { padding: 1.2rem; }
.chat-burbuja {
  background: var(--blanco); border: 1px solid var(--piedra);
  border-radius: 12px 12px 12px 3px; padding: .85rem 1rem;
  font-size: .92rem; color: var(--pizarra); margin-bottom: 1rem;
}
.chat-motivos { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.chip {
  font-family: var(--titulo); font-weight: 500; font-size: .82rem;
  background: var(--blanco); border: 1.5px solid var(--piedra);
  border-radius: 999px; padding: .45rem 1rem; min-height: 42px;
  cursor: pointer; color: var(--grafito); transition: var(--transicion);
}
.chip:hover { border-color: var(--terracota); }
.chip[aria-pressed="true"] { background: var(--petroleo); border-color: var(--petroleo); color: var(--blanco); }
.chat-panel .campo { margin-bottom: .8rem; }
.chat-panel textarea { min-height: 76px; }
.chat-panel__pie { font-size: .78rem; color: var(--pizarra); text-align: center; margin: .9rem 0 0; }

/* ---------- Aviso de cookies ---------- */
.cookies {
  position: fixed; left: 20px; bottom: 20px; z-index: 70;
  width: min(420px, calc(100vw - 40px));
  background: var(--blanco); border: 1px solid var(--piedra);
  border-radius: var(--radio); padding: 1.2rem 1.3rem;
  box-shadow: 0 14px 38px rgba(47,52,55,.18);
  display: none;
}
.cookies[data-visible="true"] { display: block; }
.cookies p { font-size: .9rem; color: var(--pizarra); margin-bottom: 1rem; }
.cookies__acciones { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookies .btn { min-height: 44px; padding: .6rem 1.3rem; font-size: .88rem; }
@media (max-width: 520px) { .cookies { left: 20px; right: 20px; bottom: 92px; width: auto; } }

/* ---------- Aparición al hacer scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-anim="on"] .revela {
    opacity: 0; transform: translateY(16px);
    transition: opacity .5s ease-out, transform .5s ease-out;
  }
  html[data-anim="on"] .revela.visible { opacity: 1; transform: none; }
}

@media print {
  .chat-boton, .chat-panel, .cabecera, .cookies { display: none !important; }
}

/* ---------- Reporte de muestra (Inicio §3.7): texto y vista de la primera página ---------- */
.muestra { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.muestra__vista { position: relative; display: block; max-width: 400px; justify-self: center; transition: var(--transicion); }
.muestra__vista img { display: block; width: 100%; height: auto; border: 1px solid var(--piedra); box-shadow: 0 18px 40px rgba(47, 52, 55, .14); }
.muestra__vista:hover { transform: translateY(-4px); }
.muestra__marca {
  position: absolute; top: -.8rem; left: -.8rem; z-index: 1;
  background: var(--terracota-texto); color: var(--blanco);
  font-family: var(--titulo); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: .45rem .9rem;
}
@media (max-width: 820px) {
  .muestra { grid-template-columns: 1fr; }
  .muestra__vista { max-width: 320px; }
}

/* ============================================================
   ESTILO EDITORIAL (elegido por Paola el 24-09-2026)
   Referencias: Aesop, Kinfolk, Vipp, Anabei, Carey, Coproactiva y FirstService.
   La fotografía manda, esquinas rectas, títulos grandes y livianos, pocas cajas.
   Va al final para ajustar lo definido más arriba. Paleta y Jost no cambian.
   ============================================================ */

:root { --radio: 0; }

/* ---------- Botones rectos, en mayúsculas con interletrado ---------- */
.btn {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .76rem;
  font-weight: 500;
  padding: 1rem 1.9rem;
  min-height: 52px;
}
/* En la cabecera el botón se queda en minúscula: en mayúscula no cabe */
.cabecera__cta { text-transform: none; letter-spacing: .02em; font-size: .9rem; padding: .6rem 1.3rem; min-height: 44px; }

/* Enlace secundario: texto subrayado con flecha, en vez de un segundo botón */
.enlace-flecha {
  align-self: center;
  font-family: var(--titulo); font-size: .76rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--petroleo); text-decoration: none;
  border-bottom: 1px solid var(--petroleo); padding-bottom: .3rem;
  transition: var(--transicion);
}
.enlace-flecha::after { content: "  →"; }
.enlace-flecha:hover { color: var(--terracota-texto); border-color: var(--terracota); }

/* ---------- Portada dividida: texto sobre hueso, foto hasta el borde ---------- */
.portada-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: min(calc(100vh - 80px), 820px);
}
.portada-editorial__texto {
  align-self: center;
  padding: 4rem clamp(1.5rem, 4vw, 4.5rem) 4rem max(1.25rem, calc((100vw - 1120px) / 2));
}
.portada-editorial h1 { font-size: clamp(2.3rem, 4.1vw, 3.5rem); line-height: 1.12; }
.portada-editorial h1 span { display: block; color: var(--terracota-texto); }
.portada-editorial .acciones { gap: 1.8rem; margin-top: 2.4rem; }
.portada-editorial__foto { margin: 0; position: relative; }
.portada-editorial__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Movimiento lento sobre la foto de Inicio: acercamiento suave de ida y vuelta.
   Se ve como video, sin el peso de un video. Se apaga si la persona pidió reducir el movimiento. */
.portada-editorial--movimiento .portada-editorial__foto { overflow: hidden; }
.portada-editorial--movimiento .portada-editorial__foto img {
  transform-origin: 62% 45%;
  animation: acercamiento 14s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes acercamiento {
  from { transform: scale(1); }
  to   { transform: scale(1.12) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .portada-editorial--movimiento .portada-editorial__foto img { animation: none; }
}

@media (max-width: 860px) {
  .portada-editorial { grid-template-columns: 1fr; min-height: 0; }
  .portada-editorial__foto { order: -1; aspect-ratio: 4 / 3; }
  .portada-editorial__texto { padding: 2.4rem 1.25rem 3rem; }
}

/* ---------- Franja de prueba: liviana, entre líneas finas ---------- */
.franja { background: var(--hueso); color: var(--grafito); border-top: 1px solid var(--piedra); border-bottom: 1px solid var(--piedra); }
.franja__grilla { padding: 1.8rem 0; }
.franja__item { font-size: .92rem; }

/* ---------- Títulos de sección más grandes y livianos ---------- */
h2 { font-size: clamp(1.7rem, 3.3vw, 2.55rem); line-height: 1.16; }
.seccion { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }

/* ---------- Tarjetas abiertas: sin caja, separadas por una línea ---------- */
.grilla { gap: 2.6rem 2.4rem; }
.tarjeta,
.seccion--blanca .tarjeta {
  background: transparent; border: 0; border-top: 1px solid var(--piedra);
  border-radius: 0; padding: 1.4rem 0 0;
}
.tarjeta__numero { font-size: 1.6rem; font-weight: 300; letter-spacing: .02em; color: var(--terracota-texto); margin-bottom: .6rem; }

/* ---------- Comparación abierta ---------- */
.comparacion { gap: 0; border-bottom: 1px solid var(--piedra); }
.comparacion__fila,
.seccion--blanca .comparacion__fila { background: transparent; border: 0; border-top: 1px solid var(--piedra); border-radius: 0; }
.comparacion__area { background: transparent; color: var(--petroleo); padding-left: 0; font-weight: 500; }
.comparacion__celda + .comparacion__celda { border-left: 0; }

/* ---------- Bloques con foto ---------- */
.banda-foto { margin: 0; }
.banda-foto img { width: 100%; height: clamp(280px, 40vw, 560px); object-fit: cover; }

.dividido { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.dividido__foto { margin: 0; }
.dividido__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 820px) { .dividido { grid-template-columns: 1fr; } }

/* ---------- Resto de piezas con esquinas rectas ---------- */
.destacado, .socio, .socio__foto, .formulario, .definiciones,
.campo input, .campo select, .campo textarea, .cookies, .chat-panel, .chip { border-radius: 0; }

/* ---------- Consultas (bajo las preguntas frecuentes) ---------- */
.consulta { margin-top: 3rem; }
.consulta__titulo { font-family: var(--titulo); font-weight: 400; font-size: 1.4rem; color: var(--petroleo); margin: 0 0 .35rem; }
.consulta__bajada { color: var(--pizarra); margin: 0 0 1.3rem; }
.formulario--consulta { background: var(--hueso); }
.formulario--consulta .campo input, .formulario--consulta .campo select, .formulario--consulta .campo textarea { background: var(--blanco); }

/* ---------- Consultas v2: franja propia en dos columnas ---------- */
.consulta-enlace { margin: 1.4rem 0 0; color: var(--pizarra); }
.seccion--consulta { background: var(--hueso); border-top: 1px solid var(--piedra); border-bottom: 1px solid var(--piedra); }
.consulta2 { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; }
.consulta2 h2 { margin-top: 0; }
.consulta2__lista { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.consulta2__lista li { padding: .55rem 0 .55rem 1.4rem; position: relative; color: var(--pizarra); border-bottom: 1px solid var(--piedra); }
.consulta2__lista li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .7rem; height: 1px; background: var(--terracota); }
.seccion--consulta .formulario--consulta { background: var(--blanco); max-width: none; }
.seccion--consulta .formulario--consulta .campo input, .seccion--consulta .formulario--consulta .campo select, .seccion--consulta .formulario--consulta .campo textarea { background: var(--hueso); }
@media (max-width: 860px) { .consulta2 { grid-template-columns: 1fr; gap: 1.5rem; } }