/* Hoja de estilo de la sección de propiedades.
   Repite los tokens de la landing a propósito: así esta sección es independiente
   y tocarla nunca puede romper index.html. */

:root{
  --petroleo:#0E4A57; --petroleo-2:#0A3640; --noche:#072830;
  --cian:#00B1CB; --cian-txt:#007C90; --cian-suave:#8EDBE7; --cian-claro:#EAF7FA;
  --tinta:#16303A; --tinta-2:#4F5F66; --linea:#D6E6EA;
  --fondo:#FFFFFF; --fondo-2:#F3F8F9;
  --wa:#25D366; --wa-dark:#1DA851;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
html{color-scheme:only light; scroll-behavior:smooth;}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background:var(--fondo); color:var(--tinta); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
[id]{scroll-margin-top:76px;}
.envoltura{max-width:1080px;margin:0 auto;padding:0 20px;}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);}
.nav-inner{max-width:1080px;margin:0 auto;padding:9px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{width:27px;height:39px;}
.brand .n1{display:block;font-weight:800;font-size:14px;letter-spacing:.02em;line-height:1.1;}
.brand .n1 .o{color:var(--petroleo);}
.brand .n1 .r{color:var(--cian-txt);}
.brand .n1 .gt{color:var(--petroleo);}
.brand .n2{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-2);font-weight:600;}
.nav-links{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:500;}
.nav-links > a{color:var(--tinta-2);transition:color .18s;white-space:nowrap;}
.nav-links > a:hover{color:var(--cian-txt);}
.btn-wa-nav{background:var(--wa);color:#fff!important;padding:7px 15px;border-radius:999px;
  font-weight:700;font-size:13px;}
.btn-wa-nav:hover{background:var(--wa-dark);}
/* En el teléfono la barra lleva marca + WhatsApp + botón de menú: el nombre y el
   subtítulo se aprietan lo justo para que cada uno quepa en una sola línea. */
.brand .n1,.brand .n2{white-space:nowrap;}
@media (max-width:620px){
  .nav-inner{padding:9px 15px;gap:10px;}
  .brand{gap:8px;}
  .brand .n2{font-size:8.5px;letter-spacing:.055em;}
}
@media (max-width:390px){
  .nav-inner{padding:9px 12px;gap:8px;}
  .brand{gap:7px;}
  .brand .n1{font-size:13px;}
  .brand .n2{font-size:8px;letter-spacing:.03em;}
}
@media (max-width:359px){
  .brand .n2{display:none;}
}
.btn-wa-nav .wa-ic{display:none;width:19px;height:19px;fill:#fff;}
@media (max-width:359px){
  .btn-wa-nav{padding:0;width:40px;height:40px;display:inline-flex;
    align-items:center;justify-content:center;flex:none;}
  .btn-wa-nav span{display:none;}
  .btn-wa-nav .wa-ic{display:block;}
}
/* ===== MENÚ MÓVIL ===== */
/* Debajo de 980px los enlaces del menú no caben en una fila: se guardan
   detrás del botón "Menú" y el botón verde de WhatsApp se queda visible.
   Está armado con <details>, así que funciona aunque el JavaScript falle. */
.menu-movil{display:none;position:relative;overflow:visible;}
.menu-movil>summary::after{content:none;}
.menu-movil>summary{
  list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:50px;height:44px;
  border:1px solid var(--linea);border-radius:12px;background:#fff;
  transition:background .18s,border-color .18s;
}
.menu-movil>summary::-webkit-details-marker{display:none;}
.menu-movil>summary::marker{content:"";}
.menu-movil .rayas{position:relative;display:block;width:21px;height:2.5px;
  border-radius:2px;background:var(--petroleo);}
.menu-movil .rayas::before,
.menu-movil .rayas::after{content:"";position:absolute;left:0;width:21px;height:2.5px;
  border-radius:2px;background:var(--petroleo);}
.menu-movil .rayas::before{top:-6.5px;}
.menu-movil .rayas::after{top:6.5px;}
.menu-movil .menu-txt{font-size:9px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-2);line-height:1;}
.menu-movil[open]>summary{background:var(--cian-claro);border-color:var(--cian-suave);}
.menu-movil[open] .rayas,
.menu-movil[open] .rayas::before,
.menu-movil[open] .rayas::after{background:var(--cian-txt);}
.menu-movil[open] .menu-txt{color:var(--cian-txt);}
.menu-movil>summary:focus-visible{outline:3px solid var(--cian);outline-offset:2px;}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 11px);
  width:min(80vw,280px);
  background:#fff;border:1px solid var(--linea);border-radius:16px;
  box-shadow:0 20px 50px rgba(7,40,48,.20);
  padding:4px 10px 10px;z-index:60;
  animation:menu-cae .18s ease;
}
@keyframes menu-cae{from{opacity:0;transform:translateY(-7px);}to{opacity:1;transform:none;}}
.menu-panel a{
  display:flex;align-items:center;min-height:48px;padding:0 6px;
  font-size:15.5px;font-weight:600;color:var(--tinta);
  border-bottom:1px solid var(--linea);
}
.menu-panel a:last-child{border-bottom:0;}
.menu-panel a:hover,.menu-panel a:active{color:var(--cian-txt);}
.menu-panel .menu-wa{
  justify-content:center;margin-top:10px;min-height:46px;padding:0 14px;
  background:var(--wa);color:#fff !important;border-radius:12px;border-bottom:0;
  font-weight:700;font-size:14.5px;text-align:center;
}
@media (prefers-reduced-motion:reduce){.menu-panel{animation:none;}}
@media (max-width:980px){
  .nav-links > a:not(.btn-wa-nav){display:none;}
  .nav-links{gap:10px;}
  .menu-movil{display:block;}
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;}
}
@media (max-width:360px){
  .menu-movil>summary{width:44px;}
  .menu-movil .menu-txt{display:none;}
}

/* ===== PORTADA Y TAPAS SIN FOTOGRAFÍA ===== */
/* Para proyectos recién abiertos: en vez de un hueco, un panel de marca. */
.portada.sin-foto{
  background:linear-gradient(145deg,var(--petroleo) 0%,var(--noche) 100%);
  display:flex;align-items:flex-end;
  aspect-ratio:auto;min-height:clamp(240px,40vw,380px);
  border-radius:18px;overflow:hidden;position:relative;
}
.portada.sin-foto::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 22% 8%,rgba(0,177,203,.30),transparent 62%);
}
.portada.sin-foto::after{content:none;}
/* El texto deja de ir anclado con left/right y pasa a llevar su propio relleno,
   porque aquí fluye dentro de la caja en lugar de ir encima de una foto. */
.portada.sin-foto .portada-txt{
  position:relative;background:none;
  left:auto;right:auto;bottom:auto;
  width:100%;padding:28px;
}
.portada-pie{margin-top:12px;max-width:52ch;font-size:14.5px;line-height:1.55;
  color:rgba(255,255,255,.82);}
@media (max-width:640px){
  .portada.sin-foto{border-radius:14px;}
  .portada.sin-foto .portada-txt{padding:20px 18px 22px;}
  .portada-pie{font-size:13.5px;}
}
.tarjeta-foto.sin-foto{
  background:linear-gradient(145deg,var(--petroleo) 0%,var(--noche) 100%);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.tarjeta-foto.sin-foto::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 12%,rgba(0,177,203,.32),transparent 64%);
}
.tapa-marca{position:relative;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cian-suave);
  border:1px solid rgba(142,219,231,.45);border-radius:999px;padding:8px 16px;}

/* Leyenda de cada gasto: distingue lo mensual de lo que se paga una sola vez. */
.fila-datos small{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;
  color:var(--tinta-2);font-weight:400;}

/* ===== MIGAS ===== */
.migas{font-size:12.5px;color:var(--tinta-2);padding:16px 0 0;}
.migas a:hover{color:var(--cian-txt);text-decoration:underline;}
.migas span{color:var(--linea);margin:0 7px;}

/* ===== ENCABEZADO DE FICHA ===== */
.ficha-top{padding:14px 0 26px;}
.zona{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cian-txt);background:var(--cian-claro);
  padding:6px 13px;border-radius:999px;margin-bottom:14px;}
.ficha-top h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,5.2vw,46px);
  line-height:1.1;color:var(--petroleo);letter-spacing:-.01em;}
.ficha-sub{margin-top:10px;font-size:17px;color:var(--tinta-2);max-width:62ch;}
.precio-fila{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;margin-top:20px;}
.precio{font-size:clamp(28px,4.6vw,38px);font-weight:800;color:var(--petroleo);letter-spacing:-.02em;}
.precio-nota{font-size:14px;color:var(--tinta-2);}

/* ===== DATOS CLAVE ===== */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:14px;
  overflow:hidden;margin:26px 0 0;}
.dato{background:#fff;padding:15px 16px;}
.dato .v{font-size:19px;font-weight:800;color:var(--petroleo);line-height:1.2;}
.dato .k{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-2);font-weight:600;margin-top:3px;}

/* ===== GALERÍA ===== */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:30px 0 0;}
.galeria a{border-radius:12px;overflow:hidden;background:var(--fondo-2);display:block;}
.galeria a:first-child{grid-column:span 2;grid-row:span 2;}
.galeria img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .35s ease;}
.galeria a:first-child img{aspect-ratio:auto;height:100%;min-height:260px;}
.galeria a:hover img{transform:scale(1.04);}
@media (max-width:700px){
  .galeria{grid-template-columns:repeat(2,1fr);}
  .galeria a:first-child{grid-column:span 2;grid-row:auto;}
  .galeria a:first-child img{min-height:0;aspect-ratio:4/3;}
}
.sin-fotos{margin:30px 0 0;padding:44px 24px;text-align:center;border:2px dashed var(--linea);
  border-radius:14px;color:var(--tinta-2);background:var(--fondo-2);font-size:15px;}

/* ===== SECCIONES ===== */
section{padding:38px 0 0;}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(23px,3.4vw,30px);
  color:var(--petroleo);line-height:1.15;margin-bottom:6px;}
.regla{height:2px;width:46px;background:var(--cian);margin:10px 0 20px;border-radius:2px;}
h3{font-size:15px;font-weight:700;color:var(--petroleo);margin-bottom:9px;}
p{margin-bottom:12px;max-width:68ch;}

.columnas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
.bloque{background:var(--fondo-2);border:1px solid var(--linea);border-radius:14px;padding:20px 22px;}
.lista{list-style:none;}
.lista li{position:relative;padding-left:21px;margin-bottom:7px;font-size:15px;}
.lista li:before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--cian);}
.lista.check li:before{content:"✓";background:none;left:0;top:0;width:auto;height:auto;
  color:var(--cian-txt);font-weight:800;font-size:13px;}

.cercania{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;}
.cercania div{background:#fff;border:1px solid var(--linea);border-radius:11px;
  padding:12px 15px;font-size:14.5px;}
.cercania b{color:var(--petroleo);}

.aviso{background:var(--cian-claro);border-left:3px solid var(--cian);
  border-radius:0 12px 12px 0;padding:17px 20px;margin:20px 0 0;font-size:15px;}
.aviso b{color:var(--petroleo);}

/* ===== CIERRE ===== */
.cierre{margin:44px 0 0;background:linear-gradient(160deg,var(--petroleo) 0%,var(--noche) 100%);
  border-radius:18px;padding:40px 30px;text-align:center;color:#fff;}
.cierre h2{color:#fff;margin-bottom:10px;}
.cierre p{color:#CFE6EB;margin:0 auto 20px;max-width:52ch;}
.btn{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:700;font-size:15.5px;
  transition:transform .15s, background .2s;}
.btn:hover{transform:translateY(-2px);}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 5px 16px rgba(37,211,102,.32);}
.btn-wa:hover{background:var(--wa-dark);}
.btn-mapa{background:var(--cian-claro);color:var(--cian-txt);border:1.5px solid var(--cian-suave);
  padding:11px 20px;font-size:14.5px;}
.btn-mapa:hover{background:var(--cian);color:#fff;border-color:var(--cian);}

/* ===== PIE ===== */
footer{margin-top:52px;background:var(--noche);color:#9FBCC4;text-align:center;
  padding:38px 20px 30px;font-size:13.5px;line-height:1.75;}
.footer-logo{width:120px;margin:0 auto 16px;opacity:.95;}
.footer-redes{display:flex;justify-content:center;gap:12px;margin:16px 0 18px;}
.footer-redes a{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;border:1.5px solid rgba(142,219,231,.30);
  transition:background .2s, border-color .2s, transform .15s;}
.footer-redes a svg{width:19px;height:19px;fill:var(--cian-suave);transition:fill .2s;}
.footer-redes a:hover{background:var(--cian);border-color:var(--cian);transform:translateY(-2px);}
.footer-redes a:hover svg{fill:#fff;}
.legal{margin-top:14px;font-size:11.5px;color:#6E8F99;max-width:640px;
  margin-left:auto;margin-right:auto;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* ===== WHATSAPP FLOTANTE ===== */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:56px;height:56px;
  border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(37,211,102,.42);transition:transform .18s;}
.wa-float:hover{transform:scale(1.07);}
.wa-float svg{width:30px;height:30px;fill:#fff;}
@media (max-width:560px){
  .wa-float{width:48px;height:48px;right:14px;bottom:14px;box-shadow:0 5px 14px rgba(37,211,102,.38);}
  .wa-float svg{width:25px;height:25px;}
}

/* ===== ÍNDICE DE PROPIEDADES ===== */
.indice-top{padding:26px 0 8px;}
.indice-top h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,5.2vw,44px);
  line-height:1.1;color:var(--petroleo);}
.indice-top p{font-size:17px;color:var(--tinta-2);margin-top:10px;}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:22px;margin:28px 0 0;}
.tarjeta{border:1px solid var(--linea);border-radius:16px;overflow:hidden;background:#fff;
  transition:transform .2s, box-shadow .2s;display:flex;flex-direction:column;}
.tarjeta:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(14,74,87,.10);}
.tarjeta-foto{aspect-ratio:16/10;background:var(--fondo-2);position:relative;
  display:flex;align-items:center;justify-content:center;color:var(--tinta-2);font-size:13px;}
.tarjeta-foto img{width:100%;height:100%;object-fit:cover;}
.tarjeta-cuerpo{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column;}
.tarjeta-zona{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cian-txt);margin-bottom:6px;}
.tarjeta h2{font-size:21px;margin-bottom:8px;}
.tarjeta-datos{font-size:14px;color:var(--tinta-2);margin-bottom:14px;}
.tarjeta-precio{margin-top:auto;font-size:21px;font-weight:800;color:var(--petroleo);}
.vacio{margin:30px 0;padding:40px 24px;text-align:center;border:2px dashed var(--linea);
  border-radius:14px;color:var(--tinta-2);background:var(--fondo-2);}

/* Aquí vivían reglas sueltas para `table`, `th` y `td`, de unas tablas que el
   sitio ya no usa. Una de ellas ponía min-width:420px a cualquier tabla, y en
   un teléfono de 390 eso tapaba la columna del precio. Las tablas de ahora se
   estilan solas en el bloque REPORTE DE PRECIOS, más abajo. */
.zona-punto{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;
  vertical-align:-1px;}

/* ===== ESTADO DE LAS OBRAS ===== */
.estado{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:18px;}
.estado > div{border:1px solid var(--linea);border-radius:14px;padding:18px 20px;}
.estado .listo{border-color:#B7E3C6;background:#F2FBF5;}
.estado .pendiente{border-color:#F0DCA8;background:#FDF8EC;}
.estado h3{margin-bottom:10px;}
.estado .listo h3{color:#1B7A43;}
.estado .pendiente h3{color:#9A6B12;}

/* ===== PREGUNTAS ===== */
.preguntas details{border:1px solid var(--linea);border-radius:12px;margin-bottom:10px;
  background:#fff;overflow:hidden;}
.preguntas summary{cursor:pointer;padding:15px 18px;font-weight:700;color:var(--petroleo);
  font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:14px;}
.preguntas summary::-webkit-details-marker{display:none;}
.preguntas summary:after{content:"+";color:var(--cian-txt);font-weight:700;flex:none;}
.preguntas details[open] summary:after{content:"–";}
.preguntas .resp{padding:0 18px 16px;color:var(--tinta-2);font-size:15px;}
.preguntas .resp p{margin-bottom:9px;}
.preguntas .resp p:last-child{margin-bottom:0;}

/* ===== PIE DE FOTO DE REFERENCIA ===== */
.galeria figure{position:relative;border-radius:12px;overflow:hidden;background:var(--fondo-2);margin:0;}
.galeria figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.galeria figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);
  background:rgba(7,40,48,.80);color:#fff;font-size:11.5px;font-weight:600;
  padding:5px 11px;border-radius:999px;}

/* ===== PORTADA CON FOTO ===== */
.portada{position:relative;border-radius:18px;overflow:hidden;margin:14px 0 0;
  aspect-ratio:16/7;background:linear-gradient(160deg,var(--petroleo),var(--noche));color:#fff;}
.portada > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.portada:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,40,48,.05) 30%,rgba(7,40,48,.55) 66%,rgba(7,40,48,.92) 100%);}
.portada-txt{position:absolute;left:28px;right:28px;bottom:22px;z-index:2;}
.portada-txt .zona{background:rgba(255,255,255,.14);color:#EAF7FA;
  border:1px solid rgba(234,247,250,.35);backdrop-filter:blur(4px);margin-bottom:11px;}
.portada-txt h1{font-family:var(--serif);font-weight:600;color:#fff;
  font-size:clamp(28px,5vw,48px);line-height:1.06;letter-spacing:-.01em;
  text-shadow:0 2px 22px rgba(0,0,0,.35);}
@media (max-width:640px){
  .portada{aspect-ratio:4/3;border-radius:14px;}
  .portada-txt{left:18px;right:18px;bottom:16px;}
}

/* ===== ENTRADILLA EN CURSIVA BAJO CADA TÍTULO ===== */
.lead-seccion{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.4vw,20.5px);
  line-height:1.45;color:var(--cian-txt);max-width:60ch;margin:-4px 0 18px;}

/* ===== PASOS NUMERADOS ===== */
.pasos{counter-reset:paso;margin-top:18px;}
.pasos .paso{counter-increment:paso;position:relative;padding-left:52px;margin-bottom:18px;}
.pasos .paso:before{
  content:counter(paso);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;
  background:var(--cian);color:#fff;font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,177,203,.30);}
.pasos .paso b{display:block;color:var(--petroleo);font-size:16px;margin-bottom:2px;}
.pasos .paso span{color:var(--tinta-2);font-size:15px;}
.pasos:after{content:"";position:absolute;}

/* ===== NOTA PERSONAL ===== */
.nota-oscar{margin:44px 0 0;border-radius:20px;overflow:hidden;
  background:linear-gradient(155deg,var(--petroleo) 0%,var(--noche) 100%);color:#fff;
  display:grid;grid-template-columns:200px 1fr;gap:0;align-items:stretch;}
.nota-oscar .retrato{position:relative;min-height:100%;}
.nota-oscar .retrato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 22%;}
.nota-oscar .texto{padding:30px 34px;}
.nota-oscar .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cian-suave);margin-bottom:10px;}
.nota-oscar h2{color:#fff;margin-bottom:12px;}
.nota-oscar p{color:#CFE6EB;font-size:16px;max-width:62ch;}
.nota-oscar .firma{margin-top:16px;font-family:var(--serif);font-style:italic;font-size:19px;
  color:var(--cian-suave);}
@media (max-width:700px){
  .nota-oscar{grid-template-columns:1fr;}
  /* En el teléfono la caja es apaisada y el retrato es vertical: con 16/9 y el
     encuadre alto la cara quedaba cortada a la altura de los ojos. Con 3/2 y el
     encuadre bajo se ve completa. */
  .nota-oscar .retrato{aspect-ratio:3/2;min-height:0;}
  .nota-oscar .retrato img{object-position:50% 71%;}
  .nota-oscar .texto{padding:24px 22px;}
}

/* ===== GUÍA ===== */
/* El cuerpo de la guía no usa el relleno que traen las demás secciones: aquí
   el espacio lo dan los propios títulos. */
.guia-cuerpo{padding:0;margin-top:22px;}
.guia-cuerpo > h2{margin-top:42px;}
.guia-cuerpo > *:first-child{margin-top:0;}
.guia-cuerpo > p{margin-top:14px;font-size:16.5px;color:var(--tinta-2);max-width:68ch;}
.guia-cuerpo > .lista, .guia-cuerpo > .aviso, .guia-cuerpo > .pasos,
.guia-cuerpo > .fila-datos{margin-top:18px;}
.guia-indice{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;}
.guia-enlace{display:block;padding:18px 20px;border:1px solid var(--linea);border-radius:14px;
  background:var(--fondo-2);transition:border-color .18s,transform .18s,box-shadow .18s;}
.guia-enlace b{display:block;font-size:16.5px;color:var(--petroleo);margin-bottom:5px;}
.guia-enlace span{display:block;font-size:14.5px;color:var(--tinta-2);line-height:1.5;}
.guia-enlace:hover{border-color:var(--cian-suave);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(14,74,87,.09);}
.guia-enlace:focus-visible{outline:3px solid var(--cian);outline-offset:2px;}
@media (max-width:760px){ .guia-indice{grid-template-columns:1fr;} }

/* ===== REPORTE DE PRECIOS ===== */
.guia-cuerpo > .tabla-envoltura{margin-top:18px;}
.sello-corte{display:inline-block;margin-top:14px;padding:7px 14px;border-radius:999px;
  background:var(--cian-claro);color:var(--cian-txt);font-size:12.5px;font-weight:600;
  letter-spacing:.02em;}
.pie-fuente{margin-top:12px;font-size:13px;line-height:1.6;color:var(--tinta-2);
  max-width:68ch;font-style:italic;}

.tabla-envoltura{border:1px solid var(--linea);border-radius:14px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;}
.tabla-precios{width:100%;min-width:0;border-collapse:collapse;font-size:14.5px;}
.tabla-precios th{background:var(--petroleo);color:#fff;text-align:left;font-weight:600;
  padding:12px 14px;font-size:13px;letter-spacing:.03em;text-transform:uppercase;
  white-space:nowrap;}
.tabla-precios td{padding:12px 14px;border-top:1px solid var(--linea);color:var(--tinta-2);
  vertical-align:top;}
.tabla-precios tbody tr:nth-child(odd){background:var(--fondo-2);}
.tabla-precios td:first-child{color:var(--tinta);font-weight:600;}
/* Las columnas de cifras las marca el generador, no la posición. */
.tabla-precios th.num, .tabla-precios td.num{text-align:right;white-space:nowrap;}
.tabla-precios td.num{color:var(--petroleo);font-weight:700;}

/* En el teléfono la tabla no cabe: cada fila se vuelve una tarjeta y cada celda
   se pone su propio rótulo, que es el nombre de la columna que perdió. */
/* La tabla pasa a tarjetas antes que el resto del sitio: con seis columnas
   ya no cabe cómoda en una tablet, y una tabla con scroll de lado es la forma
   más fácil de que alguien no vea la columna del precio. */
@media (max-width:900px){
  /* Sin overflow escondido: aquí ya no hay nada que recortar y recortando se
     comía justo la columna del precio. Y la tabla deja de ser tabla, porque
     si no conserva el ancho mínimo de sus columnas y se sale de la pantalla. */
  .tabla-envoltura{border:0;border-radius:0;overflow:visible;}
  .tabla-precios{display:block;width:100%;}
  .tabla-precios tbody{display:block;width:100%;}
  .tabla-precios thead{display:none;}
  .tabla-precios tbody tr{display:block;border:1px solid var(--linea);border-radius:12px;
    padding:6px 4px;margin-bottom:10px;background:var(--fondo-2);}
  .tabla-precios tbody tr:nth-child(odd){background:var(--fondo-2);}
  .tabla-precios td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    border:0;padding:6px 12px;text-align:right;}
  .tabla-precios td:before{content:attr(data-col);flex:0 0 auto;text-align:left;
    font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-2);
    font-weight:600;opacity:.75;}
  .tabla-precios td:first-child{display:block;text-align:left;font-size:16px;
    color:var(--petroleo);padding:10px 12px 8px;border-bottom:1px solid var(--linea);
    margin-bottom:4px;}
  .tabla-precios td:first-child:before{display:none;}
  .tabla-precios td.num{font-size:16px;}
  /* Una celda de frase se lee mejor debajo de su rótulo que apretada al lado. */
  .tabla-precios td:not(.num):not(:first-child){display:block;text-align:left;}
  .tabla-precios td:not(.num):not(:first-child):before{display:block;margin-bottom:2px;}
}

/* ===== FRASE DE CIERRE ===== */
.frase{margin:40px 0 0;padding:34px 30px;text-align:center;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);}
.frase q{font-family:var(--serif);font-style:italic;font-size:clamp(20px,3.4vw,27px);
  line-height:1.3;color:var(--petroleo);quotes:"“" "”";}
.frase .autor{margin-top:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-2);font-weight:600;}

/* ===== SECCIÓN CON FONDO SUAVE ===== */
.tinta-suave{background:var(--fondo-2);border:1px solid var(--linea);
  border-radius:18px;padding:30px 32px;margin-top:38px;}
.tinta-suave section, section.tinta-suave{padding-top:0;}
@media (max-width:640px){ .tinta-suave{padding:24px 20px;border-radius:14px;} }

/* ===== QUIÉN TE ATIENDE ===== */
.autor-chip{display:flex;align-items:center;gap:13px;margin:14px 0 0;
  padding:11px 16px 11px 11px;border:1px solid var(--linea);border-radius:999px;
  background:linear-gradient(90deg,var(--cian-claro),#fff 62%);}
.autor-chip img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid #fff;box-shadow:0 2px 9px rgba(14,74,87,.18);}
.autor-txt{min-width:0;flex:1;}
.autor-txt b{display:block;font-size:14.5px;color:var(--petroleo);line-height:1.25;}
.autor-txt span{display:block;font-size:12.5px;color:var(--tinta-2);line-height:1.3;}
.autor-wa{flex:none;font-size:13px;font-weight:700;color:#fff;background:var(--wa);
  padding:8px 16px;border-radius:999px;transition:background .2s;}
.autor-wa:hover{background:var(--wa-dark);}
@media (max-width:560px){
  .autor-chip{border-radius:16px;padding:12px 14px;flex-wrap:wrap;}
  .autor-txt{flex:1 1 60%;}
  .autor-wa{flex:1 1 100%;text-align:center;margin-top:4px;}
}

/* rótulo de imagen de referencia sobre la portada */
.portada .cover-chip{
  position:absolute;top:16px;left:16px;z-index:3;
  font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.03em;
  padding:6px 13px;border-radius:999px;
  background:rgba(7,40,48,.78);color:#fff;
  border:1px solid rgba(234,247,250,.28);backdrop-filter:blur(4px);
}
@media (max-width:640px){ .portada .cover-chip{top:12px;left:12px;font-size:11px;padding:5px 11px;} }

/* ===== SECCIÓN CON FOTO AL LADO ===== */
.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;margin-top:18px;}
.duo.invertido .duo-foto{order:-1;}
.duo-txt > *:first-child{margin-top:0;}
.duo-foto{position:relative;border-radius:16px;overflow:hidden;margin:0;
  box-shadow:0 10px 30px rgba(14,74,87,.13);}
.duo-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}
.duo-foto figcaption{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);
  background:rgba(7,40,48,.80);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  padding:5px 12px;border-radius:999px;}
@media (max-width:760px){
  .duo{grid-template-columns:1fr;gap:20px;}
  .duo.invertido .duo-foto{order:0;}
}

/* ===== BANDA ANCHA DE FOTO ===== */
.banda{position:relative;margin:46px 0 0;border-radius:18px;overflow:hidden;aspect-ratio:16/6;}
.banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.banda:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,40,48,.80) 0%,rgba(7,40,48,.42) 52%,rgba(7,40,48,.14) 100%);}
.banda .frase-banda{position:absolute;left:0;right:0;bottom:0;top:0;z-index:2;
  display:flex;align-items:center;padding:0 clamp(22px,5vw,52px);}
.banda .frase-banda q{font-family:var(--serif);font-style:italic;color:#fff;
  font-size:clamp(18px,2.9vw,30px);line-height:1.25;max-width:22ch;
  text-shadow:0 2px 18px rgba(0,0,0,.35);quotes:"“" "”";}
.banda .cover-chip{position:absolute;top:14px;right:14px;z-index:3;
  font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;
  background:rgba(7,40,48,.78);color:#fff;border:1px solid rgba(234,247,250,.28);}
@media (max-width:640px){
  .banda{aspect-ratio:3/2;margin-top:34px;}
  .banda .frase-banda q{max-width:none;}
  .banda:after{background:linear-gradient(180deg,rgba(7,40,48,.22) 30%,rgba(7,40,48,.82) 100%);}
  .banda .frase-banda{align-items:flex-end;padding-bottom:22px;}
}

/* ===== CIERRE CON FOTO DE FONDO ===== */
.cierre.con-foto{position:relative;overflow:hidden;}
.cierre.con-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.18;z-index:0;}
/* La foto de fondo da ambiente, pero encima van etiquetas y campos: un velo
   oscuro los sostiene sin apagar la foto. */
.cierre.con-foto:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(170deg,rgba(7,40,48,.52),rgba(7,40,48,.80));}
.cierre.con-foto > *:not(img){position:relative;z-index:2;}

/* ===== PARRILLA DE AMENIDADES ===== */
/* Once renglones en viñetas se leen como un párrafo; en parrilla con icono se
   barren de un vistazo, que es como la gente mira lo que trae un proyecto. */
.parrilla{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;margin-top:16px;}
.parrilla li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45;
  color:var(--tinta);background:#fff;border:1px solid var(--linea);border-radius:12px;
  padding:12px 14px;}
.parrilla .ic-am{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--cian-txt);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
/* Dentro de las cajas de "lo que ya está" y "lo proyectado" la parrilla va a una
   sola columna —la caja es angosta— y el icono toma el color de su caja, que es
   la señal de si eso existe hoy o todavía no. */
.estado .parrilla{grid-template-columns:1fr;gap:7px;margin-top:4px;}
/* Si la caja va sola ocupa todo el ancho, y ahí una sola columna desperdicia
   media página: vuelve a repartirse en varias. */
.estado > div:only-child .parrilla{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.estado .parrilla li{background:rgba(255,255,255,.72);border-color:transparent;padding:8px 10px;
  font-size:14px;}
.estado .listo .parrilla .ic-am{stroke:#2E9E5B;}
.estado .pendiente .parrilla .ic-am{stroke:#C08A14;}

/* ===== PRECIOS EN TARJETAS, NO EN TABLA ===== */
.precios-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px;margin-top:20px;}
.precio-tarjeta{border:1px solid var(--linea);border-radius:16px;padding:18px 20px;
  background:#fff;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s;}
.precio-tarjeta:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(14,74,87,.10);}
.precio-tarjeta.destacada{border-color:var(--cian-suave);background:var(--cian-claro);}
.precio-tarjeta .etiqueta{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cian-txt);margin-bottom:8px;display:flex;align-items:center;gap:7px;}
.precio-tarjeta .cifra{font-size:27px;font-weight:800;color:var(--petroleo);line-height:1.05;
  letter-spacing:-.02em;}
.precio-tarjeta .medida{font-size:14px;color:var(--tinta-2);margin-top:5px;}
.precio-tarjeta .pie-tarjeta{margin-top:13px;padding-top:11px;border-top:1px solid var(--linea);
  display:flex;justify-content:space-between;gap:10px;font-size:13.5px;}
.precio-tarjeta.destacada .pie-tarjeta{border-top-color:var(--cian-suave);}
.precio-tarjeta .pie-tarjeta b{display:block;color:var(--petroleo);font-size:15px;}
.precio-tarjeta .pie-tarjeta span{color:var(--tinta-2);font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;}
.precio-tarjeta .nota-t{margin-top:9px;font-size:12.5px;color:var(--tinta-2);line-height:1.35;}

/* fila compacta de datos sueltos */
.fila-datos{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.fila-datos div{flex:1 1 150px;border:1px solid var(--linea);border-radius:12px;
  padding:12px 15px;background:var(--fondo-2);}
.fila-datos b{display:block;color:var(--petroleo);font-size:16px;}
.fila-datos span{font-size:12.5px;color:var(--tinta-2);}

/* ===== FORMULARIO QUE ARMA EL MENSAJE DE WHATSAPP ===== */
/* No manda nada a ningún servidor: el guion del pie junta los campos, arma el
   mensaje y lo abre en el WhatsApp de quien lo llenó. Va siempre dentro de una
   caja oscura (.cierre o .contacto), por eso las etiquetas son claras y los
   campos blancos. */
.form-wa{margin:22px auto 0;max-width:640px;text-align:left;}
.form-wa .form-titulo{font-family:var(--serif);font-size:22px;font-weight:600;color:#fff;
  margin-bottom:14px;text-align:center;}
.form-wa .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px;}
.form-wa label{display:block;}
.form-wa label > span{display:block;font-size:12.5px;font-weight:700;color:#CFE6EB;margin-bottom:6px;}
.form-wa label > span i{font-style:normal;font-weight:500;opacity:.65;}
.form-wa input,.form-wa select,.form-wa textarea{width:100%;font:inherit;font-size:15px;
  line-height:1.4;color:var(--tinta);background:#fff;border:1px solid var(--linea);
  border-radius:11px;padding:11px 13px;appearance:none;-webkit-appearance:none;}
.form-wa textarea{resize:vertical;min-height:78px;}
.form-wa select{padding-right:36px;background-repeat:no-repeat;background-position:right 12px center;
  background-size:15px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F5F66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}
.form-wa input::placeholder,.form-wa textarea::placeholder{color:#93A4AA;}
.form-wa input:focus,.form-wa select:focus,.form-wa textarea:focus{outline:none;
  border-color:var(--cian);box-shadow:0 0 0 3px rgba(0,177,203,.38);}
.form-wa .ancho-campo{grid-column:1/-1;}
.form-wa .ancho{margin-top:13px;}
.form-wa .acciones{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:16px;margin-top:18px;}
.form-wa button.btn{margin:0;border:0;cursor:pointer;font-family:inherit;display:inline-flex;
  align-items:center;gap:9px;}
.form-wa button.btn .wa-ic{width:19px;height:19px;fill:currentColor;flex:none;}
.form-wa .directo{color:var(--cian-suave);font-size:14px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;}
.form-wa .directo:hover{color:#fff;}
.form-wa .form-nota{font-size:12.5px;line-height:1.65;color:#A9C9D2;margin-top:14px;
  text-align:center;max-width:56ch;}
@media (max-width:560px){
  .form-wa .campos{grid-template-columns:1fr;}
  .form-wa .acciones{flex-direction:column;gap:12px;}
  .form-wa button.btn{width:100%;justify-content:center;}
}