/* =====================================================================
   CONSTRUYE CON EL BIKER — construyeconelbiker.com
   Hoja de estilos única. Mobile first: la mayoría del tráfico llega
   desde Instagram, en celular vertical.
   ===================================================================== */

/* =====================================================================
   LAS FUENTES, EN NUESTRO PROPIO SERVIDOR

   Antes venían de fonts.googleapis.com con el truco de
   media="print" onload="this.media='all'", que es lo que evita que la
   hoja de otro dominio detenga el pintado.

   Ese truco se cayó al poner la Content-Security-Policy: es un
   manejador escrito dentro de la etiqueta, y la política no los deja
   correr. Cargarlas derecho tampoco servía —volvían a detener el
   pintado, y hay una prueba que lo vigila—. Y hacer el cambio con
   JavaScript deja un parpadeo con la letra del sistema en cada carga.

   Así que se bajaron. Es lo que el comentario de la plantilla llevaba
   tiempo diciendo que sería lo ideal, y ahora lo es de verdad:

     · una conexión menos: ni DNS, ni TLS, ni CSS, ni espera a otro
       dominio antes de pedir el primer archivo de letra
     · el caché de un año que ya da el .htaccess
     · la política queda más cerrada: ya no hace falta permitir
       fonts.googleapis.com ni fonts.gstatic.com
     · y nada que pedirle a un tercero sobre quién visita el sitio

   Son 152 KB en total y sólo las variantes que el sitio usa: Archivo
   en 400, 500, 600 y 700, y Fraunces variable —que es una sola letra
   para todos los grosores y tamaños ópticos—. Sin cursivas, porque no
   se usan, y sólo el alfabeto latino, que cubre el español y el
   inglés.

   Las dos son SIL Open Font License; la licencia va junto a los
   archivos, en assets/fonts/.
   ===================================================================== */

@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/archivo-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/archivo-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/archivo-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/archivo-latin-700-normal.woff2) format("woff2")}

/* Fraunces trae dentro los ejes de grosor y de tamaño óptico, así que
   un solo archivo sirve para todo. El font-optical-sizing:auto de los
   títulos es lo que hace que un encabezado grande y uno chico no usen
   el mismo dibujo de letra. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/fraunces-latin-variable.woff2) format("woff2-variations")}

:root{
  /* ---------------- Marca ----------------
     La paleta se aclaró: antes el sitio arrancaba en tinta oscura y
     ahora arranca en piedra clara, como una obra a media mañana. El
     oscuro se reserva para el texto y el pie, donde sí pesa. */
  --tinta:      #14181C;
  --tinta-2:    #1E252B;
  --tinta-3:    #2E3841;

  --hueso:      #FAF8F4;   /* fondo general, cálido */
  --crema:      #F4EFE6;   /* chukum claro */
  --blanco:     #FFFFFF;
  --arena:      #E9E1D2;
  --arena-2:    #DACFBB;
  --piedra:     #CFC3AC;

  --gris:       #6B7680;
  --gris-claro: #98A2AA;
  --linea:      #E6DFD3;
  --linea-2:    #D9D0C0;

  --jade:       #0E7A6B;
  --jade-osc:   #0A5C51;
  --jade-claro: #14A491;
  --jade-suave: #E4F1EE;

  --sol:        #B87524;
  --sol-suave:  #FAF0E1;
  --rojo:       #A83A32;
  --rojo-suave: #F8E7E5;

  /* ---------------- Texturas ----------------
     Todas dibujadas, ninguna fotográfica: son SVG y degradados que
     viven dentro de esta hoja. No hay peticiones extra, no hay
     licencias de nadie y pesan bytes, no megas. En un celular con
     señal regular eso es la diferencia entre entrar y rebotar. */

  /* Grano de chukum: ruido fino en tono arena */
  --tex-chukum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.37 0 0 0 0 0.29 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Veta de piedra caliza: bandas horizontales muy tenues */
  --tex-piedra: repeating-linear-gradient(
      178deg,
      rgba(120,104,78,.018) 0 1px,
      transparent 1px 13px,
      rgba(120,104,78,.011) 13px 14px,
      transparent 14px 37px);

  /* Retícula de plano arquitectónico */
  --tex-plano:
      repeating-linear-gradient(90deg, rgba(20,24,28,.045) 0 1px, transparent 1px 32px),
      repeating-linear-gradient(0deg,  rgba(20,24,28,.045) 0 1px, transparent 1px 32px);
  --tex-plano-fino:
      repeating-linear-gradient(90deg, rgba(20,24,28,.028) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(0deg,  rgba(20,24,28,.028) 0 1px, transparent 1px 8px);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --sombra: 0 1px 2px rgba(20,24,28,.05), 0 10px 28px -18px rgba(20,24,28,.30);
  --sombra-alta: 0 2px 4px rgba(20,24,28,.05), 0 26px 56px -28px rgba(20,24,28,.40);

  --ancho: 1180px;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
}

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

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

body{
  margin:0;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--tinta);
  /* El grano va fijo: al hacer scroll la textura se queda quieta y la
     página se siente impresa sobre ella, no pintada encima. */
  background:var(--tex-chukum), var(--tex-piedra), var(--hueso);
  background-attachment:fixed,fixed,fixed;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0 0 .5em;line-height:1.1;text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-.015em;font-optical-sizing:auto}
h1{font-size:clamp(1.95rem,5.2vw,3.05rem)}
h2{font-size:clamp(1.5rem,3.9vw,2.2rem)}
h3{font-size:1.08rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:var(--jade);text-underline-offset:3px}
img,svg{max-width:100%}

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

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.centro{text-align:center}
.nota{color:var(--gris);font-size:.92rem}

.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--jade);margin:0 0 .9rem}

/* ------------------------------ Botones ------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:600;line-height:1;
  padding:.85rem 1.35rem;min-height:48px;          /* objetivo táctil */
  border:1px solid transparent;border-radius:var(--r-md);
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background .15s ease, border-color .15s ease, transform .06s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primario{background:var(--jade);color:#fff;box-shadow:0 1px 2px rgba(10,92,81,.2)}
.btn--primario:hover{background:var(--jade-osc);box-shadow:0 4px 14px -4px rgba(10,92,81,.45)}
.btn--fantasma{background:rgba(255,255,255,.6);color:var(--tinta);border-color:var(--linea-2)}
.btn--fantasma:hover{border-color:var(--tinta-3);background:#fff}
.btn--texto{background:none;border:0;color:var(--gris);min-height:40px;padding:.5rem;font-weight:500}
.btn--texto:hover{color:var(--tinta)}
.btn--lg{padding:1rem 1.6rem;font-size:1.02rem}
.btn--sm{padding:.55rem .9rem;min-height:40px;font-size:.9rem}
.btn--bloque{width:100%}

/* ----------------------------- Cabecera ----------------------------- */
.cabecera{
  position:sticky;top:0;z-index:40;
  background:rgba(250,248,244,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linea);
  color:var(--tinta);
}
@supports not (backdrop-filter:blur(4px)){ .cabecera{background:var(--hueso)} }
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.marca{display:flex;align-items:center;gap:.6rem;color:var(--tinta);text-decoration:none}
.marca__simbolo{display:block;height:38px;width:auto}
@media(max-width:780px){ .marca__simbolo{height:32px} }
@media(max-width:400px){ .marca__simbolo{height:28px} }
.marca__texto{font-size:1rem;letter-spacing:-.01em;white-space:nowrap}
.marca__texto strong{font-weight:700}
.nav{display:flex;align-items:center;gap:1.4rem}
.nav a{color:var(--gris);text-decoration:none;font-size:.92rem;transition:color .15s ease}
.nav a:hover{color:var(--tinta)}
.nav .btn--primario{color:#fff;white-space:nowrap}

/* El botón de reserva de la cabecera. Nace escondido con el atributo
   hidden y el JavaScript lo destapa cuando el botón grande de la página
   se va de la pantalla. */
.cabecera__cta[hidden]{display:none}
/* Y con el menú abierto tampoco: el panel trae su propio "Empezar mi
   proyecto" abajo, grande. Abrir el menú empuja el botón de la página
   fuera de la pantalla, así que sin esto el de la cabecera se destapaba
   solo y quedaban dos idénticos, uno encima del otro. */
body.con-menu .cabecera__cta{display:none}

/* ---- El botón de las tres rayas ----
   Sólo existe en teléfono y tableta: arriba de 780 px los enlaces caben
   a la vista y hacer que alguien abra un cajón para leer dos enlaces es
   una traba, no una ayuda. */
.menu-btn{
  display:none;
  width:42px;height:42px;padding:0;
  border:1px solid var(--linea-2);border-radius:12px;
  background:rgba(255,255,255,.6);color:var(--tinta);
  cursor:pointer;align-items:center;justify-content:center;
}
.menu-btn:hover{background:rgba(255,255,255,.95)}
.menu-btn__barras{display:grid;gap:4px;width:18px}
.menu-btn__barras span{
  display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform .18s ease,opacity .18s ease;
}
/* Abierto, las tres rayas se cruzan en una equis. */
.menu-btn--abierto .menu-btn__barras span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn--abierto .menu-btn__barras span:nth-child(2){opacity:0}
.menu-btn--abierto .menu-btn__barras span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---- El panel ---- */
.menu{
  border-top:1px solid var(--linea);
  background:var(--hueso);
  box-shadow:0 12px 24px rgba(20,24,28,.07);
}
.menu__lista{
  display:grid;gap:.15rem;
  max-width:var(--ancho);margin:0 auto;
  padding:.4rem clamp(1rem,4vw,2rem) 1rem;
}
.menu__lista a{
  display:block;padding:.85rem .25rem;
  color:var(--tinta);text-decoration:none;font-size:1.02rem;
  border-bottom:1px solid var(--linea);
}
.menu__lista a:last-of-type{border-bottom:0}
.menu__lista a:hover{color:var(--jade)}
.menu__cta{
  margin-top:.7rem;text-align:center;color:#fff!important;
  border-bottom:0!important;padding:.85rem 1rem!important;
}
.menu__cta:hover{color:#fff!important}
@media (prefers-reduced-motion:reduce){
  .menu-btn__barras span{transition:none}
}

@media(max-width:780px){
  /* En el celular se esconden los enlaces de texto de la cabecera
     —"Tulum Country Club" y "Cómo construir"—, que se pasan al menú.
     El selector de idioma NO: también son enlaces <a>, pero para la
     mitad de quienes llegan aquí es la diferencia entre entender y no
     entender la pantalla donde se les pide su WhatsApp; escondido
     dentro del menú no lo encuentra nadie. */
  .nav__enlace{display:none}
  .menu-btn{display:flex}
  .marca__texto{font-size:.9rem}
  .cabecera__fila{gap:.5rem;min-height:60px}
  .cabecera .btn--sm{padding:.5rem .75rem;font-size:.82rem}
}
/* Y arriba de 780 el panel no se dibuja aunque quedara abierto. */
@media(min-width:781px){
  .menu{display:none}
}
/* El nombre escrito de la marca y el botón de reserva no caben juntos
   en un teléfono. Mientras el botón está guardado —que es todo el
   principio de la página, donde se decide si alguien se queda— el
   nombre se lee completo; en cuanto el botón sale, el nombre cede el
   lugar y queda el símbolo, que identifica igual. */
@media(max-width:680px){
  body.con-cta .marca__texto{display:none}
}
@media(max-width:420px){
  /* En un teléfono chico, con el botón de reserva a la vista van cuatro
     cosas en un renglón de 320 px. Se aprietan los espacios entre ellas
     en vez de sacrificar alguna: el idioma tiene que estar, el menú
     tiene que estar, y el botón es el que trae al cliente. */
  body.con-cta .nav{gap:.45rem}
  body.con-cta .cabecera__cta{padding:.5rem .7rem;font-size:.8rem}
}
@media(max-width:380px){
  /* Y en las pantallas más chicas el nombre escrito no cabe ni al
     principio. */
  .marca__texto{display:none}
  .idioma__op{min-width:2.1rem}
}
@media(max-width:400px){
  .marca__icono svg{width:22px;height:22px}
}

/* ------------------------------- Hero ------------------------------- */
/* Antes arrancaba en tinta oscura. Ahora arranca en papel: la retícula
   de plano se asoma apenas y se desvanece hacia abajo, como una hoja de
   proyecto sobre la mesa. */
.hero{
  position:relative;
  padding:clamp(3rem,8vw,6.5rem) 0 clamp(2.5rem,6vw,5rem);
  background:var(--crema);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:var(--tex-plano), var(--tex-plano-fino);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 78%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 78%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:var(--tex-chukum);
  opacity:.9;pointer-events:none;
}
.hero > *{position:relative;z-index:1}
.hero__grid{display:grid;gap:2.5rem}
@media(min-width:940px){.hero__grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:4.5rem}}
.hero h1{color:var(--tinta);max-width:19ch;margin-bottom:.4em}
.hero__bajada{color:var(--gris);font-size:clamp(1.02rem,2.4vw,1.15rem);max-width:50ch}
.hero__acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.hero__nota{margin-top:1rem;font-size:.86rem;color:var(--gris-claro)}
.hero__visual{display:flex;justify-content:center}

/* La hoja: papel con sombra, como un plano puesto sobre la mesa */
.hero__hoja{
  width:100%;max-width:440px;
  background:var(--blanco);
  border:1px solid var(--linea-2);
  border-radius:var(--r-md);
  box-shadow:var(--sombra-alta);
  padding:.9rem;
  transform:rotate(-.6deg);
}
.hero__plano{display:block;width:100%;height:auto}

/* ----------------------------- Secciones ---------------------------- */
.seccion{padding:clamp(3rem,7vw,5.5rem) 0;position:relative}
.seccion--alt{
  background:var(--blanco);
  border-block:1px solid var(--linea);
}
/* La sección alterna lleva su propia veta de piedra, muy tenue */
.seccion--alt::before{
  content:"";position:absolute;inset:0;background:var(--tex-piedra);pointer-events:none;
}
.seccion--alt > *{position:relative;z-index:1}

/* Un filete corto arriba del título: gesto de plano, no de adorno */
.seccion__titulo{margin-bottom:2rem;position:relative;padding-top:1.5rem}
.seccion__titulo::before{
  content:"";position:absolute;top:0;left:0;width:44px;height:2px;background:var(--jade);
}

.tarjetas{display:grid;gap:1rem}
@media(min-width:760px){.tarjetas{grid-template-columns:repeat(3,1fr)}}
.tarjeta{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  padding:1.75rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tarjeta:hover{
  transform:translateY(-3px);
  box-shadow:var(--sombra);
  border-color:var(--linea-2);
}
.tarjeta h3{margin-bottom:.6rem}
.tarjeta p{margin:0;color:var(--gris);font-size:.95rem}

/* =====================================================================
   QUIÉNES SOMOS — las tres personas, al final de la portada

   Se apoya entera en lo que ya hay: el fondo de .seccion, el filete de
   jade de .seccion__titulo, el .eyebrow y la caja de .tarjeta. No trae
   colores ni tipografías nuevas, sólo el acomodo.
   ===================================================================== */
.equipo__intro{max-width:60ch;font-size:1.02rem;line-height:1.7;color:var(--tinta-3);margin:0}
.equipo__intro strong{color:var(--tinta)}

.equipo{display:grid;gap:1.25rem;margin-top:2rem}
@media(min-width:820px){.equipo{grid-template-columns:repeat(3,1fr)}}

.persona{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.persona:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--linea-2)}

/* EL RETRATO Y SU RECORTE.
   En pantalla ancha va vertical (4:5), que es la proporción de un
   retrato. En el celular va apaisado: un 4:5 a todo el ancho de un
   teléfono se come una pantalla entera antes de que se lea un solo
   nombre, y la mayoría del tráfico entra por ahí.
   El object-position al 14% es lo que hace que al cambiar de
   proporción la cabeza se quede dentro en vez de salirse por arriba:
   el recorte se ancla arriba, no al centro. */
.persona__foto{position:relative;aspect-ratio:3/2;background:var(--arena);
  border-bottom:1px solid var(--linea)}
@media(min-width:560px){.persona__foto{aspect-ratio:4/5}}
.persona__foto img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 14%;display:block}

.persona__cuerpo{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.persona__rol{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--jade);margin:0}
.persona__nombre{font-family:var(--display);font-weight:500;font-size:1.3rem;
  letter-spacing:-.015em;margin:0;font-optical-sizing:auto;color:var(--tinta)}
.persona__alias{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;
  color:var(--gris);margin-top:.2rem;text-transform:none}
.persona p{margin:0;color:var(--gris);font-size:.94rem;line-height:1.6}
/* margin-top:auto pega este renglón al fondo de la tarjeta: los textos
   de arriba tienen largos distintos y sin esto las tres líneas quedaban
   a tres alturas. */
.persona__hace{margin-top:auto;padding-top:.9rem;border-top:1px dashed var(--linea-2);
  font-size:.86rem;color:var(--tinta-3)}
.persona__hace b{color:var(--jade-osc);font-weight:600}

/* --- EL CARRUSEL DE AVANCE DE OBRA ---------------------------------
   Es una fila que se desliza, no un guion que mueve cosas. El
   scroll-snap del navegador hace el trabajo: en el teléfono se pasa
   con el dedo y en escritorio con la rueda o con las flechas del
   teclado, TODO ESO SIN JAVASCRIPT. Si el guion no carga, el carrusel
   sigue sirviendo — sólo pierde las flechas y los puntitos.

   scrollbar-width:none esconde la barra pero no quita el deslizar. */
.carrusel{position:relative;background:var(--arena);border-bottom:1px solid var(--linea)}
.carrusel__pista{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel__pista:focus-visible{outline:2px solid var(--jade);outline-offset:-2px}
.carrusel__foto{
  flex:0 0 100%;margin:0;position:relative;aspect-ratio:3/2;scroll-snap-align:center;
}
.carrusel__foto img{width:100%;height:100%;object-fit:cover;display:block}
/* El pie va encima de la foto, sobre un degradado: así no le roba
   altura a la tarjeta y se lee igual sobre una foto clara o una
   oscura. */
.carrusel__pie{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .55rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:#fff;
  background:linear-gradient(to top, rgba(20,24,28,.78), rgba(20,24,28,0));
}
/* Mientras el guion no llegue, un renglón dice cuántas hay: sin eso
   nadie adivina que la tarjeta se desliza. El guion lo reemplaza por
   los puntitos. */
.carrusel__cuenta{
  position:absolute;right:.6rem;top:.6rem;margin:0;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:#fff;
  background:rgba(20,24,28,.6);padding:.22rem .5rem;border-radius:999px;
}
.carrusel__flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--tinta);
  font-size:1.1rem;line-height:1;display:grid;place-items:center;
  box-shadow:0 1px 6px rgba(20,24,28,.22);
  opacity:0;transition:opacity .15s ease;
}
/* Las flechas aparecen al acercarse, y en un teléfono —donde se pasa
   con el dedo— se quedan visibles porque ahí no hay "acercarse". */
.carrusel:hover .carrusel__flecha,
.carrusel__flecha:focus-visible{opacity:1}
@media(hover:none){.carrusel__flecha{opacity:.85}}
.carrusel__flecha[disabled]{opacity:0!important;pointer-events:none}
.carrusel__flecha--izq{left:.5rem}
.carrusel__flecha--der{right:.5rem}
.carrusel__puntos{
  position:absolute;left:0;right:0;bottom:.5rem;z-index:2;
  display:flex;gap:.32rem;justify-content:center;pointer-events:none;
}
.carrusel__punto{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(20,24,28,.25);transition:background .15s ease,width .15s ease;
}
.carrusel__punto.es-actual{background:#fff;width:16px;border-radius:999px}

/* --- NUESTROS PROYECTOS: las obras terminadas ----------------------
   Mismas tarjetas que las personas, con una diferencia que importa:
   la foto va APAISADA (3:2) en todos los tamaños. Una obra se cuenta a
   lo ancho —la fachada, la calle, el conjunto— al revés que un
   retrato, que se cuenta a lo alto. */
.obras{display:grid;gap:1.1rem;margin-top:2rem}
@media(min-width:760px){.obras{grid-template-columns:repeat(3,1fr)}}
.obra{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.obra:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--linea-2)}
.obra__foto{position:relative;aspect-ratio:3/2;background:var(--arena);
  border-bottom:1px solid var(--linea)}
.obra__foto img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;display:block}
.obra__cuerpo{padding:1.1rem 1.2rem 1.35rem;display:flex;flex-direction:column;gap:.4rem}
.obra__meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);margin:0}
.obra__nombre{font-family:var(--display);font-weight:500;font-size:1.12rem;margin:0;
  letter-spacing:-.01em;font-optical-sizing:auto;color:var(--tinta)}
.obra p{margin:0;color:var(--gris);font-size:.9rem;line-height:1.55}

.pasos{list-style:none;margin:0 0 2.5rem;padding:0;display:grid;gap:.25rem}
@media(min-width:760px){.pasos{grid-template-columns:repeat(2,1fr);gap:.25rem 3rem}}
.pasos li{
  display:grid;grid-template-columns:2.75rem 1fr;gap:1.1rem;
  padding:1.15rem 0;border-top:1px solid var(--linea);
}
.pasos__n{
  font-family:var(--mono);font-size:.82rem;color:var(--jade);
  border:1px solid var(--jade);border-radius:50%;
  width:2.2rem;height:2.2rem;display:grid;place-items:center;
  background:var(--jade-suave);
}
.pasos strong{display:block;margin-bottom:.2rem}
.pasos p{margin:0;color:var(--gris);font-size:.92rem}

.ubicaciones{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.ubicacion-chip{
  display:inline-block;padding:.7rem 1.15rem;border:1px solid var(--linea-2);
  border-radius:999px;background:var(--blanco);text-decoration:none;color:var(--tinta);
  font-size:.93rem;transition:border-color .15s ease,color .15s ease,transform .15s ease;
}
.ubicacion-chip:hover{border-color:var(--jade);color:var(--jade);transform:translateY(-1px)}

/* ------------------------------- Pie -------------------------------- */
.pie{
  position:relative;
  background:var(--tinta);color:var(--gris-claro);
  padding:3.5rem 0 2rem;margin-top:4rem;
}
.pie::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events:none;
}
.pie > *{position:relative;z-index:1}
.pie__logo{display:block;width:100%;max-width:250px;height:auto}
.pie__grid{display:grid;gap:1.5rem}
@media(min-width:760px){.pie__grid{grid-template-columns:1fr auto;align-items:start}}
.pie__marca{color:#fff;font-weight:700;margin:0}
.pie__lema{margin:.25rem 0 0;font-size:.92rem}
.pie__nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.pie__nav a{color:var(--gris-claro);text-decoration:none;font-size:.9rem}
.pie__nav a:hover{color:#fff}
.pie__legal{border-top:1px solid var(--tinta-3);margin-top:2rem;padding-top:1.25rem}
.pie__legal p{font-size:.78rem;color:var(--gris);margin:0 0 .4rem;max-width:70ch}

/* El enlace al panel: tan discreto como el resto de la letra chica.
   No compite con nada porque no es para el cliente; está para que Luis
   no tenga que teclear la dirección. */
.pie__panel{color:var(--gris);text-decoration:underline;text-underline-offset:2px}
.pie__panel:hover,.pie__panel:focus-visible{color:var(--crema)}

/* =====================================================================
   CONFIGURADOR
   ===================================================================== */

.cfg{padding-bottom:3rem}

.cfg__barra{background:var(--blanco);border-bottom:1px solid var(--linea);position:sticky;top:64px;z-index:30}
.cfg__barra-fila{padding:.75rem clamp(1rem,4vw,2rem);display:grid;gap:.6rem}
.progreso{height:4px;background:var(--linea);border-radius:2px;overflow:hidden}
.progreso__relleno{height:100%;width:0;background:var(--jade);transition:width .35s ease}

.pasitos{list-style:none;display:flex;gap:.35rem;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.pasitos::-webkit-scrollbar{display:none}
.pasitos li{
  display:flex;align-items:center;gap:.4rem;flex:0 0 auto;
  padding:.3rem .6rem;border-radius:999px;color:var(--gris-claro);font-size:.8rem;white-space:nowrap;
}
.pasitos li span{
  font-family:var(--mono);font-size:.7rem;width:1.35rem;height:1.35rem;
  display:grid;place-items:center;border-radius:50%;border:1px solid currentColor;
}
.pasitos li em{font-style:normal}
.pasitos li.es-disponible{cursor:pointer;color:var(--gris)}
.pasitos li.es-hecho{color:var(--jade)}
.pasitos li.es-hecho span{background:var(--jade);border-color:var(--jade);color:#fff}
.pasitos li.es-activo{color:var(--tinta);background:var(--hueso);font-weight:600}
.pasitos li.es-activo span{border-color:var(--tinta)}

.cfg__guardado{margin:0;font-size:.8rem;min-height:1.2em;color:var(--gris)}
.cfg__guardado--ok{color:var(--jade)}
.cfg__guardado--error{color:var(--rojo)}
.cfg__guardado--proceso{color:var(--gris)}

.cfg__grid{display:grid;gap:2rem;padding-top:2rem}
@media(min-width:1000px){
  .cfg__grid{grid-template-columns:minmax(0,1fr) 24rem;gap:3rem;align-items:start}
  .cfg__visual{position:sticky;top:140px}
}

/* --------------------------- Etapas --------------------------------- */
.etapa{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-lg);padding:clamp(1.25rem,4vw,2rem)}
.etapa__titulo{font-size:clamp(1.4rem,4vw,2rem);margin-bottom:.4rem}
.etapa__intro{color:var(--gris);margin-bottom:1.75rem;max-width:52ch}
.etapa__acciones{display:flex;flex-wrap:wrap-reverse;gap:.75rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--linea)}
.etapa__acciones .btn--primario{flex:1 1 12rem}

.campo{margin-bottom:1.35rem}
.campo > label,.campo legend,.campo__etq{display:block;font-weight:600;font-size:.95rem;margin-bottom:.45rem}
.campo .opcional{font-weight:400;color:var(--gris-claro);font-size:.85em}
.campo__ayuda{font-size:.86rem;color:var(--gris);margin:-.6rem 0 1.35rem}
/* Lo que calculamos nosotros se ve distinto de lo que trae su ficha.
   No es adorno: es la diferencia entre un dato suyo y uno nuestro. */
.campo__ayuda--calculada{color:var(--jade-osc);margin:-.6rem 0 .5rem}

.campo--doble,.campo--triple{display:grid;gap:1rem;border:0;padding:0;margin-inline:0}
@media(min-width:520px){
  .campo--doble{grid-template-columns:1fr 1fr}
  .campo--triple{grid-template-columns:repeat(3,1fr)}
}
.campo--doble label,.campo--triple label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.45rem}
/* La pista de "con una basta" cruza las dos columnas: es de las dos
   medidas, no de una. */
.campo--doble__pista{grid-column:1/-1;margin:-.35rem 0 0;font-size:.86rem;color:var(--gris)}

input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--tinta);
  background:var(--blanco);border:1px solid var(--arena-2);border-radius:var(--r-md);
  padding:.8rem .9rem;min-height:48px;
}
textarea{min-height:auto;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--jade);outline:2px solid var(--jade-suave);outline-offset:0}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7680' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}

.check{display:grid;grid-template-columns:1.4rem 1fr;gap:.65rem;align-items:start;font-weight:400!important;cursor:pointer}
.check input{width:1.25rem;height:1.25rem;margin-top:.15rem;accent-color:var(--jade)}
.check span{font-size:.95rem;line-height:1.45}
.check--sm span{font-size:.85rem}

/* Honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --------------------------- Opciones ------------------------------- */
.opciones{display:flex;flex-wrap:wrap;gap:.5rem}
/* Cuando las opciones son frases y no etiquetas cortas, en fila se
   parten feo y se leen peor. Apiladas cada una tiene su renglón. */
.opciones--apiladas{flex-direction:column;align-items:stretch}
.opcion{
  font:inherit;font-size:.93rem;font-weight:500;color:var(--tinta);
  background:var(--blanco);border:1px solid var(--arena-2);border-radius:var(--r-md);
  padding:.7rem 1rem;min-height:46px;cursor:pointer;text-align:left;
  transition:border-color .15s ease, background .15s ease;
}
.opcion:hover{border-color:var(--jade)}
.opcion.es-activo{border-color:var(--jade);background:var(--jade-suave);color:var(--jade-osc);font-weight:600}
.opcion.es-activo::before{content:"✓ ";font-weight:700}
.opciones--tarjetas{display:grid;gap:.6rem}
@media(min-width:560px){.opciones--tarjetas{grid-template-columns:1fr 1fr}}
.opciones--tarjetas .opcion{display:grid;gap:.2rem;padding:1rem}
.opciones--tarjetas strong{font-size:.98rem}
.opciones--tarjetas small{color:var(--gris);font-weight:400;font-size:.82rem;line-height:1.35}
.opciones--tarjetas .opcion.es-activo small{color:var(--jade-osc)}

/* ---------------------------- Avisos -------------------------------- */
.aviso{border-radius:var(--r-md);padding:.9rem 1.1rem;font-size:.92rem;margin-bottom:1.35rem;border-left:3px solid}
.aviso--info{background:var(--sol-suave);border-color:var(--sol);color:#6D451A}
/* El que sólo dice cuál es el siguiente paso. En ámbar se leía como
   una advertencia —"algo falta"— cuando lo único que falta es que
   escoja su lote. */
.aviso--guia{background:var(--jade-suave);border-color:var(--jade);color:var(--jade-osc)}
.aviso--nota{background:var(--jade-suave);border-color:var(--jade);color:var(--jade-osc)}
.aviso--error{background:var(--rojo-suave);border-color:var(--rojo);color:var(--rojo)}

/* ------------------- Ya tenemos los datos de tu lote -----------------
   Aparece cuando el cliente escoge un lote cuya ficha ya está cargada.
   Va en jade y con palomita porque es la única caja del formulario que
   trae buenas noticias: es la que le quita ocho campos de encima. */
/* ---------------------------------------------------------------
   ESTE LOTE ESTÁ A LA VENTA

   Va en el color de acento —arena, no jade— a propósito: el jade es
   el color de "ya tenemos tus datos", y esto no es un dato más de la
   ficha, es una oportunidad de compra. Dos cosas distintas no deben
   verse iguales o la segunda se lee como parte de la primera, que es
   exactamente lo que pasó.
   --------------------------------------------------------------- */
.venta{
  border:1px solid var(--sol);background:var(--sol-suave);
  border-left-width:4px;
  border-radius:var(--r-lg);padding:1rem 1.15rem;margin:0 0 1.5rem;
}
.venta__etq{
  margin:0 0 .2rem;font-size:.9rem;font-weight:700;color:var(--sol);
  letter-spacing:.02em;text-transform:uppercase;
}
.venta__precio{margin:0 0 .5rem;line-height:1.2}
.venta__monto{
  display:block;font-family:var(--mono);
  font-size:clamp(1.35rem,5.5vw,1.8rem);font-weight:700;
}
.venta__zona{display:block;font-size:.88rem;color:var(--gris);margin-top:.12rem}
.venta__nota{margin:0;font-size:.9rem;color:var(--gris);line-height:1.5}

/* El conteo de arriba, junto al menú: una línea, sin caja. */
.venta-aviso{
  margin:.5rem 0 0;font-size:.9rem;font-weight:600;color:var(--sol);
}

.ficha-lista{
  border:1px solid var(--jade);background:var(--jade-suave);
  border-radius:var(--r-lg);padding:1.25rem;margin:1.25rem 0 1.75rem;
}
.ficha-lista__cabecera{display:flex;gap:.75rem;align-items:flex-start}
.ficha-lista__palomita{
  flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--jade);color:var(--blanco);margin-top:1px;
}
.ficha-lista__cabecera h2{font-size:1.05rem;margin:0 0 .3rem}
.ficha-lista__cabecera p{font-size:.9rem;color:var(--jade-osc);margin:0;max-width:52ch}

.ficha-lista__datos{
  display:grid;gap:0;margin:1rem 0 0;
  border:1px solid rgba(14,122,107,.22);border-radius:12px;
  background:var(--blanco);overflow:hidden;
}
.ficha-lista__datos > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.6rem .85rem;border-bottom:1px solid rgba(14,122,107,.14);
}
.ficha-lista__datos > div:last-child{border-bottom:0}
.ficha-lista__datos dt{font-size:.86rem;color:var(--gris)}
.ficha-lista__datos dd{
  margin:0;font-weight:700;font-size:.95rem;color:var(--tinta);
  font-variant-numeric:tabular-nums;text-align:right;
}
.ficha-lista__nota{
  font-size:.82rem;color:var(--jade-osc);margin:.75rem 0 0;max-width:58ch;
}
.ficha-lista__corregir{
  margin-top:.85rem;padding-left:0;font-size:.88rem;color:var(--jade-osc);
  text-decoration:underline;text-underline-offset:3px;
}
.ficha-lista__corregir:hover{color:var(--jade)}

/* La pista de la ficha dentro del campo de corrección: se ve como un
   valor puesto, pero el campo está vacío de verdad. Lo que el cliente
   escriba encima es suyo; lo que deje en blanco se queda con la ficha. */
.escritura input::placeholder{color:var(--gris-claro);opacity:1;font-weight:600}

/* ---------------------- La foto de la chepina ------------------------
   Es la puerta que evita ocho campos técnicos, así que se ve como una
   invitación y no como un campo más del formulario. */
.foto-ficha{
  border:1px dashed var(--linea-2);border-radius:var(--r-lg);
  padding:1.25rem;margin:1.25rem 0 1.75rem;background:var(--blanco);
}
.foto-ficha h2{font-size:1.05rem;margin:0 0 .35rem}
.foto-ficha > p{font-size:.92rem;color:var(--gris);margin:0 0 1rem;max-width:56ch}
.foto-ficha__boton{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  padding:.85rem 1.15rem;border-radius:12px;
  border:1px solid var(--jade);background:var(--jade-suave);
  color:var(--jade-osc);font-weight:700;font-size:.95rem;
  transition:background .15s ease,border-color .15s ease;
}
.foto-ficha__boton:hover{background:#D6EBE6;border-color:var(--jade-osc)}
.foto-ficha__boton:focus-within{outline:2px solid var(--jade);outline-offset:2px}
.foto-ficha__icono{display:grid;place-items:center;flex:0 0 auto}
.foto-ficha__nota{font-size:.82rem;color:var(--gris);margin:.75rem 0 0;max-width:58ch}
.foto-ficha__estado{
  margin:.9rem 0 0;padding:.7rem .9rem;border-radius:10px;
  font-size:.9rem;background:var(--arena);color:var(--tinta);
}
.foto-ficha__estado--proceso{background:var(--jade-suave);color:var(--jade-osc)}
.foto-ficha__estado--ok{background:var(--jade-suave);color:var(--jade-osc);font-weight:600}
.foto-ficha__estado--aviso{background:var(--sol-suave);color:#6D451A}
.foto-ficha__estado--error{background:var(--rojo-suave);color:var(--rojo)}

.ficha-lista--foto{border-style:dashed}
.ficha-lista__acciones{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem}

/* Cuando la foto y nuestro registro no dicen lo mismo. Va en ámbar y no
   en rojo: no es un error del cliente, es una diferencia que hay que
   resolver entre los dos. */
.ficha-choque{
  border:1px solid var(--sol);background:var(--sol-suave);
  border-radius:var(--r-lg);padding:1.25rem;margin:1.25rem 0 1.75rem;
}
.ficha-choque h2{font-size:1.05rem;margin:0 0 .35rem;color:#6D451A}
.ficha-choque > p{font-size:.92rem;color:#6D451A;margin:0 0 1rem;max-width:56ch}
.ficha-choque__tabla-envoltura{overflow-x:auto;border-radius:12px;background:var(--blanco)}
.ficha-choque__tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.ficha-choque__tabla th,.ficha-choque__tabla td{
  padding:.6rem .8rem;text-align:right;border-bottom:1px solid var(--linea);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ficha-choque__tabla thead th{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gris);font-weight:700;
}
.ficha-choque__tabla th:first-child,
.ficha-choque__tabla td:first-child{text-align:left;white-space:normal}
.ficha-choque__tabla tbody th{font-weight:500;color:var(--gris)}
.ficha-choque__tabla tbody td{font-weight:700}
.ficha-choque__tabla tr:last-child th,
.ficha-choque__tabla tr:last-child td{border-bottom:0}
.ficha-choque__acciones{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.ficha-choque__nota{font-size:.82rem;color:#6D451A;margin:.85rem 0 0;max-width:60ch}

/* ----------------------------- Visor -------------------------------- */
.visor{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sombra)}
.visor__cabecera{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.85rem}
.visor__titulo{font-weight:600;font-size:.95rem}
.visor__badge{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.25rem .55rem;border-radius:999px;background:var(--sol-suave);color:var(--sol);white-space:nowrap;
}
.visor__badge--ok{background:var(--jade-suave);color:var(--jade-osc)}
.visor__badge--gris{background:var(--hueso);color:var(--gris)}
.visor__svg{width:100%;height:auto;display:block;background:var(--hueso);border-radius:var(--r-sm)}

.visor__leyenda{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.75rem 0 0;font-size:.75rem;color:var(--gris)}
.leyenda__item{display:inline-flex;align-items:center;gap:.35rem}
.leyenda__color{width:.7rem;height:.7rem;border-radius:2px;display:inline-block;border:1px solid var(--arena-2)}
.leyenda__color--lote{background:transparent;border-color:var(--tinta)}
.leyenda__color--envolvente{background:rgba(20,164,145,.18);border-color:var(--jade)}
.leyenda__color--construccion{background:rgba(20,164,145,.45);border-color:var(--jade-osc)}
.leyenda__color--alberca{background:#BFE3EA;border-color:#5FA6B5}
.leyenda__color--terraza{background:var(--arena);border-color:var(--arena-2)}
.leyenda__color--estac{background:#D9DDE1;border-color:var(--gris-claro)}
.leyenda__color--jardin{background:#DDE9CF;border-color:#94AE75}
.leyenda__color--rooftop{background:transparent;border-color:var(--jade)}

.resumen{margin:1.1rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--linea);display:grid;gap:.1rem}
.resumen > div{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px dashed var(--linea)}
.resumen > div:last-child{border-bottom:0}
.resumen dt{color:var(--gris);font-size:.85rem}
.resumen dd{margin:0;font-family:var(--mono);font-size:.88rem;font-variant-numeric:tabular-nums;white-space:nowrap}

.explicacion{display:grid;gap:.5rem;margin-top:.9rem}
.explicacion__item{margin:0;font-size:.85rem;line-height:1.5;padding:.7rem .85rem;border-radius:var(--r-sm)}
.explicacion__item--clave{background:var(--jade-suave);color:var(--jade-osc)}
.explicacion__item--oportunidad{background:var(--sol-suave);color:#6D451A}
.explicacion__item--nota{background:var(--hueso);color:var(--gris)}
.explicacion__item--alerta{background:var(--rojo-suave);color:var(--rojo)}

.visor__legal{font-size:.7rem;color:var(--gris-claro);margin:1rem 0 0;line-height:1.45}

/* --------------------------- Plano SVG ------------------------------ */
.plano__lote{fill:none;stroke:var(--tinta);stroke-width:1.5}
.plano__envolvente{fill:rgba(20,164,145,.14);stroke:var(--jade);stroke-width:1.2;stroke-dasharray:5 3}
.plano__construccion{fill:rgba(14,122,107,.42);stroke:var(--jade-osc);stroke-width:1}
.plano__alberca{fill:#BFE3EA;stroke:#5FA6B5;stroke-width:1}
.plano__terraza{fill:var(--arena);stroke:var(--arena-2);stroke-width:1}
.plano__estac{fill:#D9DDE1;stroke:var(--gris-claro);stroke-width:.8}
.plano__dim{stroke:var(--gris-claro);stroke-width:1}
.plano__cota-ppal{fill:var(--gris);font-family:var(--mono);font-size:10px}
.plano__cota{fill:var(--gris-claro);font-family:var(--mono);font-size:8px}
.plano__calle{fill:var(--gris-claro);font-family:var(--mono);font-size:9px;letter-spacing:.1em}
.plano__etiqueta{fill:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.08em}
.plano__etiqueta-sm{fill:var(--tinta);font-family:var(--mono);font-size:7.5px}
.plano__area{fill:var(--tinta);font-family:var(--mono);font-size:15px;font-weight:600}
.plano__nota{fill:var(--gris);font-family:var(--mono);font-size:9px}
.plano__placeholder{fill:var(--gris-claro);font-size:11px}
.plano__badge{fill:var(--jade-osc);font-family:var(--mono);font-size:8px;letter-spacing:.06em}

/* ----------------------- Captura intermedia ------------------------- */
.guardar-caja{
  margin-top:1.25rem;background:var(--tinta);color:var(--arena);
  border-radius:var(--r-lg);padding:1.25rem;
}
.guardar-caja p{margin:0 0 .35rem}
.guardar-caja strong{color:#fff}
.guardar-caja .campo__ayuda{color:var(--gris-claro);margin:0 0 1rem}
.guardar-caja__form{display:grid;gap:.6rem}
.guardar-caja input[type=text],.guardar-caja input[type=tel]{
  background:var(--tinta-2);border-color:var(--tinta-3);color:#fff;
}
.guardar-caja input::placeholder{color:var(--gris)}
.guardar-caja .check span{color:var(--gris-claro)}
.guardar-caja a{color:var(--jade-claro)}

/* --------------------------- Resultado ------------------------------ */
.etapa--final{text-align:center}
.folio-caja{
  display:inline-grid;gap:.25rem;margin:1rem auto 1.5rem;padding:1rem 2rem;
  background:var(--jade-suave);border-radius:var(--r-lg);
}
.folio-caja span{font-size:.78rem;color:var(--jade-osc);letter-spacing:.1em;text-transform:uppercase;font-family:var(--mono)}
.folio-caja strong{font-family:var(--mono);font-size:1.4rem;color:var(--jade-osc);letter-spacing:.04em}
.enlace-proyecto{font-family:var(--mono);font-size:.85rem;word-break:break-all}
.etapa--final .etapa__acciones{justify-content:center;border-top:0}

/* ------------------------- Página de ubicación ---------------------- */
/* La portada de una ubicación: misma familia que el hero de inicio,
   pero más contenida. Lleva su propia retícula porque estas páginas
   hablan de normativa, y el plano es el lenguaje de la normativa. */
.ubi-hero{
  position:relative;overflow:hidden;
  background:var(--crema);color:var(--tinta);
  padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid var(--linea);
}
.ubi-hero::before{
  content:"";position:absolute;inset:0;
  background:var(--tex-plano-fino);
  -webkit-mask-image:radial-gradient(120% 90% at 85% 0%,rgba(0,0,0,.9),transparent 70%);
  mask-image:radial-gradient(120% 90% at 85% 0%,rgba(0,0,0,.9),transparent 70%);
  pointer-events:none;
}
.ubi-hero::after{
  content:"";position:absolute;inset:0;background:var(--tex-chukum);pointer-events:none;
}
.ubi-hero > *{position:relative;z-index:1}
.ubi-hero__grid{display:grid;gap:2.5rem}
@media(min-width:940px){
  .ubi-hero__grid{grid-template-columns:1.15fr .85fr;align-items:start;gap:4rem}
}

/* Ficha técnica del desarrollo. No es adorno: son los datos que alguien
   quiere confirmar antes de decidir si este es su lugar. */
.ficha{
  background:var(--blanco);
  border:1px solid var(--linea-2);
  border-radius:var(--r-lg);
  box-shadow:var(--sombra);
  overflow:hidden;
}
.ficha__titulo{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);margin:0;max-width:none;padding:1rem 1.25rem;
  background:var(--crema);border-bottom:1px solid var(--linea);
}
.ficha__lista{margin:0;padding:.35rem 1.25rem 1rem}
.ficha__lista div{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--linea);
}
.ficha__lista div:last-child{border-bottom:0}
.ficha__lista dt{color:var(--gris);font-size:.88rem;margin:0}
.ficha__lista dd{
  margin:0;font-family:var(--mono);font-size:.95rem;color:var(--tinta);
  font-variant-numeric:tabular-nums;text-align:right;
}
.ubi-hero .eyebrow{color:var(--jade)}
.ubi-hero h1{color:var(--tinta);max-width:18ch}
.ubi-hero p{color:var(--gris);max-width:58ch}
.tabla-normativa{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden}
.tabla-normativa th,.tabla-normativa td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--linea)}
.tabla-normativa tr:last-child td{border-bottom:0}
.tabla-normativa tbody tr:hover{background:var(--hueso)}
.tabla-normativa th{background:var(--crema);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gris);font-weight:600}
.tabla-normativa td:last-child{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.tabla-envoltura{overflow-x:auto;margin-bottom:1.5rem}

.prosa{max-width:68ch}
.prosa h2{margin-top:2.5rem}
.prosa ul{padding-left:1.2rem}
.prosa li{margin-bottom:.4rem}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =====================================================================
   BLOQUES AÑADIDOS AL CARGAR EL REGLAMENTO DE TULUM COUNTRY CLUB
   ===================================================================== */

/* --------------------- Datos de la escritura ------------------------ */
.escritura{
  border:1px solid var(--jade);background:var(--jade-suave);
  border-radius:var(--r-lg);padding:1.25rem;margin:1.75rem 0;
}
.escritura__cabecera h2{font-size:1.05rem;margin-bottom:.35rem}
.escritura__cabecera p{font-size:.92rem;color:var(--jade-osc);margin-bottom:1rem;max-width:52ch}
.escritura .campo{margin-bottom:1rem}
.escritura input{background:var(--blanco)}
.escritura .campo__ayuda{margin:.25rem 0 .5rem;font-weight:600;color:var(--jade-osc)}
.escritura__nota{font-size:.82rem;color:var(--gris);margin:.75rem 0 0;max-width:56ch}
.campo--cuatro{display:grid;gap:.75rem;border:0;padding:0;margin:0 0 1rem}
@media(min-width:520px){.campo--cuatro{grid-template-columns:repeat(4,1fr)}}
.campo--cuatro label{display:block;font-weight:600;font-size:.82rem;margin-bottom:.35rem}
.campo--cuatro input{padding:.7rem .6rem;font-size:.95rem}

.visor__badge--declarado{background:var(--sol-suave);color:var(--sol)}

/* -------------------- Consumo del programa -------------------------- */
.consumo{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--linea)}
.consumo__titulo{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);margin-bottom:.5rem;font-weight:600}
.consumo__lista{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.consumo__item{display:flex;justify-content:space-between;gap:1rem;font-size:.83rem;padding:.3rem 0}
.consumo__etq{color:var(--gris)}
.consumo__val{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.consumo__item--total{border-top:1px dashed var(--linea);margin-top:.25rem;padding-top:.5rem;font-weight:600}
.consumo__item--total .consumo__etq{color:var(--jade-osc)}
.consumo__item--total.es-excedido .consumo__etq,
.consumo__item--total.es-excedido .consumo__val{color:var(--rojo)}

/* ------------------ Revisión contra el reglamento ------------------- */
.cumplimiento{
  margin-top:1.25rem;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sombra);
}
.cumplimiento__cabecera h3{font-size:1rem;margin-bottom:.2rem}
.cumplimiento__cabecera p{font-size:.8rem;color:var(--gris);margin:0 0 1rem}
.cumplimiento__lista{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.cumplimiento__pie{font-size:.72rem;color:var(--gris-claro);margin:1rem 0 0;line-height:1.45}

.hallazgo{border-left:3px solid var(--linea);padding:.7rem .9rem;background:var(--hueso);border-radius:0 var(--r-sm) var(--r-sm) 0}
.hallazgo__cabecera{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;margin-bottom:.25rem}
.hallazgo__estado{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
.hallazgo__ref{font-family:var(--mono);font-size:.65rem;color:var(--gris-claro)}
.hallazgo__titulo{font-size:.88rem;font-weight:600;margin:0 0 .2rem;line-height:1.35}
.hallazgo__detalle{font-size:.82rem;color:var(--gris);margin:0;line-height:1.5}
.hallazgo__accion{font-size:.8rem;margin:.35rem 0 0;color:var(--jade-osc);font-weight:500}
.hallazgo--no{border-left-color:var(--rojo);background:var(--rojo-suave)}
.hallazgo--no .hallazgo__estado{color:var(--rojo)}
.hallazgo--revisar{border-left-color:var(--sol);background:var(--sol-suave)}
.hallazgo--revisar .hallazgo__estado{color:var(--sol)}
.hallazgo--cumple{border-left-color:var(--jade);background:var(--jade-suave)}
.hallazgo--cumple .hallazgo__estado{color:var(--jade-osc)}
.hallazgo--info .hallazgo__estado{color:var(--gris)}

/* ------------------ Cláusulas en la página pública ------------------ */
.clausulas{display:grid;gap:1rem}
@media(min-width:760px){.clausulas{grid-template-columns:repeat(2,1fr)}}
.clausula{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:1.4rem;border-top:3px solid var(--linea-2);
  transition:box-shadow .18s ease,transform .18s ease;
}
.clausula:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
.clausula__ref{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--gris-claro);margin:0 0 .4rem}
.clausula h3{font-size:1rem;margin-bottom:.4rem}
.clausula p{font-size:.9rem;color:var(--gris);margin:0;line-height:1.55}
.clausula--limite{border-top-color:var(--jade)}
.clausula--prohibicion{border-top-color:var(--rojo)}
.clausula--requisito{border-top-color:var(--sol)}

.ubi-hero__legal{font-family:var(--mono);font-size:.78rem;color:var(--gris-claro);margin-top:-.25rem;
  letter-spacing:.02em}
.fuentes{list-style:none;padding:0;margin:0 0 1rem;max-width:68ch}
.fuentes li{font-size:.88rem;color:var(--gris);padding:.5rem 0;border-bottom:1px solid var(--linea)}
.fuentes span{color:var(--gris-claro)}
.plano__palapa{fill:#E7DCC6;stroke:#B79A63;stroke-width:1}
.leyenda__color--palapa{background:#E7DCC6;border-color:#B79A63}

/* ==================== Galería de renders (Fase 4) ==================== */
.renders{margin:2rem 0 0}

/* Mientras el cron trabaja: tres puntos que respiran. No es adorno,
   es la señal de que algo está pasando y vale la pena esperar. */
.renders__espera{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:1.5rem;text-align:center;
}
.renders__pulso{display:flex;gap:.45rem;justify-content:center;margin-bottom:.9rem}
.renders__pulso span{
  width:.55rem;height:.55rem;border-radius:50%;background:var(--jade);
  animation:renderPulso 1.4s ease-in-out infinite;
}
.renders__pulso span:nth-child(2){animation-delay:.2s}
.renders__pulso span:nth-child(3){animation-delay:.4s}
@keyframes renderPulso{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .renders__pulso span{animation:none;opacity:.6}
}
.renders__espera-titulo{
  margin:0 0 .5rem;font-family:var(--display);font-size:1.25rem;line-height:1.25;
  color:var(--tinta);
}
.renders__espera-texto{margin:0;font-size:.92rem;color:var(--gris);line-height:1.6;max-width:46ch;
  margin-inline:auto}
.renders__progreso{
  margin:.9rem 0 0;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--jade);font-weight:600;
}

/* Cuando no se pudieron generar. Mismo peso visual que la espera: es
   igual de importante que el cliente lo lea. */
.renders__aviso{
  background:var(--arena);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:1.5rem;text-align:center;
}

.renders__titulo{font-size:1.35rem;margin:0 0 .35rem}
.renders__subtitulo{
  margin:0 0 1.15rem;font-size:.92rem;line-height:1.6;color:var(--gris);max-width:58ch;
}
.renders__grid{display:grid;gap:1rem}
@media(min-width:720px){
  .renders__grid{grid-template-columns:repeat(2,1fr)}
  /* La primera imagen es la aérea: se lleva el ancho completo porque
     es la que explica el lote entero. */
  .renders__grid .render:first-child{grid-column:1 / -1}
}
.render{margin:0;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r-lg);overflow:hidden}
.render img{display:block;width:100%;height:auto;background:var(--hueso)}
.render__pie{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem .9rem;
}
.render__pie > span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris-claro);
}
.render__baja{
  display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto;
  font-size:.8rem;font-weight:600;color:var(--jade);text-decoration:none;
  padding:.4rem .7rem;border:1px solid var(--linea);border-radius:999px;
  background:var(--blanco);transition:background .15s ease,border-color .15s ease;
}
.render__baja:hover,.render__baja:focus-visible{
  background:var(--jade-suave);border-color:var(--jade);
}
.render__baja svg{flex:0 0 auto}
@media (prefers-reduced-motion:reduce){ .render__baja{transition:none} }

/* El cierre: es el argumento de venta, no un pie de foto. */
.renders__cierre{
  margin:1.5rem 0 0;padding:1.25rem 1.4rem;
  background:var(--tinta);color:var(--blanco);border-radius:var(--r-lg);
  font-size:1.05rem;line-height:1.6;max-width:60ch;
}
.renders__legal{
  margin:.9rem 0 0;font-size:.72rem;color:var(--gris-claro);line-height:1.5;max-width:70ch;
}

/* ============ Bloque opcional "afinar tu proyecto" (Fase 4) ============ */
/* Va plegado por omisión: quien tiene prisa no lo ve como un muro de
   preguntas, y quien está enganchado lo abre por gusto. */
.afinar{
  margin:1.75rem 0 0;border:1px solid var(--linea);border-radius:var(--r-lg);
  background:var(--jade-suave);overflow:hidden;
}
.afinar__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;padding:1.1rem 1.25rem;background:none;border:0;cursor:pointer;
  text-align:left;font:inherit;color:inherit;
}
.afinar__toggle-texto{display:block}
.afinar__toggle strong{display:block;font-size:1rem;line-height:1.4;color:var(--tinta)}
.afinar__toggle em{
  display:block;margin-top:.2rem;font-style:normal;font-size:.85rem;color:var(--jade)
}
.afinar__chevron{
  flex:0 0 auto;width:.7rem;height:.7rem;border-right:2px solid var(--jade);
  border-bottom:2px solid var(--jade);transform:rotate(45deg);transition:transform .18s ease;
}
.afinar__toggle[aria-expanded="true"] .afinar__chevron{transform:rotate(-135deg)}
.afinar__campos{padding:0 1.25rem 1.25rem}
.afinar__campos .campo:first-child{margin-top:0}
@media (prefers-reduced-motion:reduce){
  .afinar__chevron{transition:none}
}


/* Quien pidió menos movimiento en su sistema, no lo recibe de nosotros. */
@media (prefers-reduced-motion:reduce){
  .tarjeta,.ubicacion-chip,.btn,.nav a{transition:none}
  .tarjeta:hover,.ubicacion-chip:hover{transform:none}
  body{background-attachment:scroll,scroll,scroll}
}


/* ==================== WhatsApp flotante ====================
   Verde de WhatsApp a propósito: es el color que la gente reconoce
   sin leer nada, y esa fracción de segundo es todo el trabajo que
   tiene que hacer este botón. En pantalla grande se abre y muestra el
   texto; en el celular es solo el círculo, que ahí el espacio se cobra
   caro. */
.wa{
  position:fixed;right:clamp(.9rem,3vw,1.5rem);bottom:clamp(.9rem,3vw,1.5rem);z-index:60;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.55rem;border-radius:999px;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:var(--sombra-alta);
  transition:transform .18s ease,opacity .22s ease,visibility .22s ease;
}
.wa:hover{transform:translateY(-2px)}
.wa:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.wa__icono{display:grid;place-items:center;width:2.6rem;height:2.6rem;flex:0 0 auto}
.wa__texto{
  display:none;padding-right:.85rem;
  font-size:.92rem;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
}
@media (min-width:900px){
  .wa__texto{display:block}
}

/* Mientras el botón principal de la página está a la vista, el flotante
   se quita de en medio. Nunca debe tapar el "Continuar" del cliente. */
.wa--oculto{opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none}

@media print{ .wa{display:none} }
@media (prefers-reduced-motion:reduce){
  .wa{transition:opacity .22s ease,visibility .22s ease}
  .wa:hover{transform:none}
}


/* ==================== Selector de idioma ====================
   En Tulum Country Club la mitad de los propietarios son extranjeros,
   así que esto no es un ajuste secundario: para la mitad de quienes
   llegan es la diferencia entre entender y no entender. Va visible en
   el encabezado, no escondido en un menú. */
.idioma{
  display:inline-flex;align-items:center;
  border:1px solid var(--linea-2);border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.6);
}
.idioma__op{
  display:grid;place-items:center;
  min-width:2.6rem;min-height:34px;padding:0 .1rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--gris);text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.idioma__op:hover{color:var(--tinta);background:rgba(255,255,255,.9)}
.idioma__op.es-activo{background:var(--jade);color:#fff;font-weight:600}
.idioma__op.es-activo:hover{background:var(--jade)}

@media(max-width:780px){
  /* En el celular el encabezado ya va apretado: el selector se queda
     —es lo que no puede faltar— y lo que se va son los enlaces de
     texto, que ya están en el pie. */
  /* Y más alto, no más bajo: en el celular se pica con el dedo, no con
     un puntero. 42 px es lo mínimo que se acierta sin fallar. */
  .idioma__op{min-width:2.3rem;min-height:42px;font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .idioma__op{transition:none}
}


/* ==================== El estimado de obra ====================
   Va después de las imágenes. Se ve como una ficha de datos y no como
   una promoción: quien llegó hasta aquí ya se convenció, lo que
   necesita ahora es un número claro y saber qué trae adentro. */
.cotiza{
  /* La pantalla final va centrada; esta caja no. Son listas y cifras:
     centradas se leen peor y las viñetas pierden su columna. */
  text-align:left;
  margin:2.2rem 0 0;padding:1.6rem clamp(1rem,3vw,1.8rem);
  border:1px solid var(--linea);border-radius:var(--r-lg);
  background:var(--blanco);box-shadow:var(--sombra);
}
.cotiza__titulo{font-family:var(--display);font-size:1.5rem;margin:0 0 .3rem}
.cotiza__metros{color:var(--gris);margin:0 0 .9rem}
.cotiza__desglose{list-style:none;margin:0 0 1.2rem;padding:0;font-size:.94rem}
.cotiza__desglose li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.42rem 0;border-bottom:1px dashed var(--linea);
}
.cotiza__desglose li:last-child{border-bottom:0}
.cotiza__desglose li span:first-child{color:var(--gris)}
.cotiza__desglose li span:last-child{font-family:var(--mono);white-space:nowrap}
.cotiza__rango{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  margin:0 0 .2rem;padding:1rem 0;border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.cotiza__etq{color:var(--gris);font-size:.92rem;width:100%}
.cotiza__rango strong{
  font-family:var(--mono);font-size:clamp(1.45rem,5vw,2rem);
  letter-spacing:-.02em;color:var(--jade-osc);
}
.cotiza__moneda{color:var(--gris);font-size:.95rem}
.cotiza__equiv{margin:.5rem 0 0;color:var(--gris-claro);font-family:var(--mono);font-size:.88rem}

.cotiza__que{display:grid;gap:1.2rem;margin:1.4rem 0 0}
@media(min-width:620px){ .cotiza__que{grid-template-columns:1.35fr 1fr;gap:2rem} }
.cotiza__que h3{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);margin:0 0 .5rem}
.cotiza__que ul{margin:0;padding:0;list-style:none;font-size:.93rem;line-height:1.5}
.cotiza__que li{position:relative;padding-left:1.15rem;margin-bottom:.35rem}
.cotiza__que li::before{position:absolute;left:0;top:0}
.cotiza__si li::before{content:'+';color:var(--jade);font-weight:700}
/* La lista de lo que NO incluye se ve igual de clara que la otra: es
   donde se evitan los malentendidos de después, no letra chica. */
.cotiza__no li::before{content:'—';color:var(--sol)}

.cotiza__total{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  margin:1.4rem 0 0;padding:1rem;border-radius:var(--r-md);
  background:var(--jade-suave);
}
.cotiza__total .cotiza__etq{color:var(--jade-osc)}
.cotiza__total strong{
  font-family:var(--mono);font-size:clamp(1.2rem,4vw,1.6rem);
  letter-spacing:-.02em;color:var(--jade-osc);
}
.cotiza__nota{width:100%;color:var(--jade-osc);font-size:.86rem;opacity:.85}

.cotiza__terreno{
  margin:1.4rem 0 0;padding:.9rem 1rem;border-radius:var(--r-md);
  background:var(--jade-suave);color:var(--jade-osc);font-size:.92rem;line-height:1.5;
}
.cotiza__legal{margin:1rem 0 0;color:var(--gris);font-size:.85rem;line-height:1.5}