/* ═══════════════════════════════════════════════════════════
   PISOS ESCOBAR · hoja de estilos única
   Paleta tomada del logo: azul marino + dorado.
   Todo centralizado en :root — cambia ahí y cambia el sitio.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Color — marca */
  --navy:      #1F2545;   /* azul del logo */
  --navy-dk:   #161B33;   /* footer y CTA */
  --gold:      #C3A068;   /* dorado del logo (rellenos, nunca texto chico) */

  --bg:        #F8F6F2;   /* fondo general */
  --bg-2:      #FFFFFF;   /* tarjetas */
  --bg-alt:    #F0EDE6;   /* secciones alternadas */
  --ink:       #1F2545;   /* texto principal = azul de marca */
  --ink-2:     #454A61;   /* texto secundario */
  --muted:     #6E7285;   /* texto tenue */
  --line:      #E3DFD6;   /* bordes */
  --clay:      #8A6E3E;   /* dorado oscurecido: sí pasa contraste como texto */
  --clay-dk:   #6E5730;
  --clay-soft: #F3EBDD;   /* dorado muy claro para fondos */
  --wa:        #25D366;   /* verde WhatsApp */
  --wa-dk:     #1EAE53;
  --dark:      #161B33;   /* footer y CTA */

  /* Tipografía */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Medidas */
  --maxw: 1180px;
  --pad: 24px;
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(27,25,23,.05), 0 8px 24px -12px rgba(27,25,23,.18);
  --shadow-lg: 0 2px 4px rgba(27,25,23,.06), 0 24px 48px -20px rgba(27,25,23,.28);
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
html:focus-within{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
button,input,select,textarea{ font:inherit; color:inherit }
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); line-height:1.15; margin:0 0 .5em; font-weight:600 }
h1{ font-size:clamp(2.2rem, 4.6vw, 3.5rem); letter-spacing:-.02em }
h2{ font-size:clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing:-.015em }
h3{ font-size:1.22rem }
p{ margin:0 0 1em }
a{ color:var(--clay); text-decoration:none }
a:hover{ text-decoration:underline }
em{ font-style:italic; color:var(--clay) }
ul{ margin:0; padding:0; list-style:none }

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0 }

/* ── Layout ────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.wrap--narrow{ max-width:780px }
.section{ padding:clamp(56px, 8vw, 104px) 0 }
.section--alt{ background:var(--bg-alt) }
.section__head{ max-width:660px; margin-bottom:44px }
.section__sub{ color:var(--muted); font-size:1.05rem; margin:0 }
.section__foot{ margin-top:34px; color:var(--muted); font-size:.96rem }

.eyebrow{
  font-family:var(--sans); font-size:.76rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--clay);
  margin:0 0 12px;
}
.eyebrow--light{ color:var(--gold) }

.grid{ display:grid; gap:22px }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(280px,1fr)) }
.grid--cards{ grid-template-columns:repeat(auto-fill, minmax(300px,1fr)) }
.grid__empty{ color:var(--muted); padding:28px 0 }

/* ── Botones ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:100px; border:1.5px solid transparent;
  font-size:.95rem; font-weight:600; letter-spacing:.01em;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn--lg{ padding:15px 30px; font-size:1rem }
.btn--full{ width:100% }
.btn--primary{ background:var(--navy); color:#fff; box-shadow:0 8px 20px -10px rgba(31,37,69,.85) }
.btn--primary:hover{ background:#2B3358 }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line) }
.btn--ghost:hover{ border-color:var(--ink); background:rgba(27,25,23,.04) }
.btn--wa{ background:var(--wa); color:#08331A }
.btn--wa:hover{ background:var(--wa-dk); color:#052a14 }

/* ── Topbar ────────────────────────────────────────────── */
.topbar{ background:var(--dark); color:#AEB4C8; font-size:.8rem }
.topbar__in{ display:flex; gap:26px; align-items:center; justify-content:center; padding-block:9px; flex-wrap:wrap }
.topbar__item--strong{ color:#fff; font-weight:600 }

/* ── Header ────────────────────────────────────────────── */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(247,244,239,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 20px -18px rgba(27,25,23,.6) }
.header__in{ display:flex; align-items:center; gap:20px; padding-block:14px }

/* Logo: marca de 4 barras (azul/dorado alternado) + la palabra PISOS ESCOBAR */
.logo{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0 }
.logo:hover{ text-decoration:none }
.logo__mark{ display:flex; flex-shrink:0 }
.logo__txt{
  /* Helvetica/Arial a propósito: es la tipografía de los archivos oficiales del logo,
     así el header calza exactamente con el kit de "Logos Pisos Escobar" */
  font-family:Helvetica, Arial, sans-serif; font-size:1.06rem; font-weight:700; color:var(--ink);
  letter-spacing:.09em; text-transform:uppercase; line-height:1.05; white-space:nowrap;
}
.logo--light .logo__txt{ color:#FFFFFF }

.nav{ display:flex; gap:26px; margin-left:auto }
.nav a{
  color:var(--ink-2); font-size:.93rem; font-weight:500; text-decoration:none;
  position:relative; padding-block:4px;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--clay); transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.nav a:hover{ color:var(--ink) }
.nav a:hover::after{ transform:scaleX(1) }

.header__cta{ padding:10px 18px; font-size:.9rem }

.burger{ display:none; background:none; border:0; padding:8px; cursor:pointer }
.burger span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease }
.burger span+span{ margin-top:6px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

/* ── Hero ──────────────────────────────────────────────── */
.hero{ padding:clamp(40px, 5vw, 68px) 0 clamp(36px, 5vw, 62px) }
.hero__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px, 5vw, 64px); align-items:center }
.hero h1{ margin-bottom:.35em }
.lead{ font-size:1.1rem; color:var(--ink-2); max-width:52ch }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin:30px 0 18px }

/* Servicio de instalación: nota destacada bajo los botones, no compite con ellos */
.hero__servicio{
  display:flex; align-items:center; gap:10px;
  width:fit-content; max-width:100%;
  margin:0 0 24px; padding:11px 16px;
  background:var(--clay-soft); border-left:3px solid var(--gold);
  border-radius:0 10px 10px 0;
  font-size:.94rem; font-weight:600; line-height:1.4;
}
.hero__servicio svg{ color:var(--clay); flex-shrink:0 }
.hero__servicio a{ color:var(--clay-dk); text-decoration:none }
.hero__servicio a:hover{ text-decoration:underline }
.hero__points{ display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.9rem; color:var(--muted) }
.hero__points li{ display:flex; align-items:center; gap:7px }
.hero__points li::before{
  content:""; width:16px; height:16px; flex-shrink:0; border-radius:50%;
  background:var(--clay-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6E3E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

.hero__media{ display:grid; gap:14px }
.hero__photo{
  /* max-height mantiene los CTA sobre el pliegue en notebooks de 720-800 px de alto */
  display:block; width:100%; aspect-ratio:4/4.2; max-height:452px;
  object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  background:linear-gradient(150deg,#cdbfae,#8f8071 55%,#6d6156); /* se ve mientras carga */
}
.hero__badge{
  position:absolute; left:18px; bottom:18px; z-index:1;
  background:rgba(255,255,255,.94); color:var(--ink);
  padding:12px 16px; border-radius:12px; font-weight:700; font-size:1.02rem; line-height:1.25;
  box-shadow:var(--shadow);
}
.hero__badge small{ display:block; font-weight:500; font-size:.74rem; color:var(--muted); letter-spacing:.02em }

.swatches{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.swatches img{
  display:block; width:100%; height:76px; object-fit:cover; border-radius:10px;
  background:linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow:inset 0 0 0 1px rgba(27,25,23,.06);
}

/* ── Franja de confianza ───────────────────────────────── */
.trust{ border-block:1px solid var(--line); background:var(--bg-2) }
.trust__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px; padding-block:26px; text-align:center }
.trust__i strong{ display:block; font-family:var(--serif); font-size:1.7rem; color:var(--ink); line-height:1.1 }
.trust__i span{ font-size:.85rem; color:var(--muted) }

/* ── Filtros ───────────────────────────────────────────── */
.filtros{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:26px }
.chip{
  padding:8px 18px; border-radius:100px; border:1.5px solid var(--line);
  background:transparent; color:var(--ink-2); font-size:.88rem; font-weight:600; cursor:pointer;
  transition:all .18s ease;
}
.chip:hover{ border-color:var(--ink); color:var(--ink) }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:#fff }

/* ── Tarjetas de catálogo ──────────────────────────────── */
.card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent }
.card__media{
  display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
  background:linear-gradient(135deg, var(--c1), var(--c2)); /* se ve mientras carga */
}
.card__body{ padding:22px; display:flex; flex-direction:column; flex:1 }
.card__body p{ font-size:.94rem; color:var(--muted) }
.tags{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 16px }
.tags li{
  font-size:.72rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  background:var(--bg-alt); color:var(--ink-2); padding:4px 9px; border-radius:6px;
}
.price{ margin:auto 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted) }
.price strong{ font-size:1.18rem; color:var(--ink); font-family:var(--serif) }

/* ── Features ──────────────────────────────────────────── */
.feat{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px }
.feat__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px;
  background:var(--clay-soft); color:var(--clay); margin-bottom:16px;
}
.feat h3{ margin-bottom:.4em }
.feat p{ font-size:.94rem; color:var(--muted); margin:0 }

/* ── Proceso ───────────────────────────────────────────── */
.pasos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; counter-reset:p }
.paso{ position:relative; padding-top:22px; border-top:2px solid var(--line) }
.paso__n{
  font-family:var(--serif); font-size:2.4rem; color:var(--clay); line-height:1;
  display:block; margin-bottom:10px; opacity:.35;
}
.paso h3{ margin-bottom:.35em }
.paso p{ font-size:.94rem; color:var(--muted); margin:0 }

/* ── Galería ───────────────────────────────────────────── */
.galeria{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:230px; gap:14px }
.gal{
  position:relative; border:0; padding:0; cursor:pointer; overflow:hidden;
  border-radius:var(--r); background:linear-gradient(135deg,var(--c1),var(--c2));
  transition:transform .3s ease, box-shadow .3s ease;
}
.gal img{ display:block; width:100%; height:100%; object-fit:cover }
.gal::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(27,25,23,.62), transparent 58%); transition:opacity .3s ease }
.gal:hover{ transform:scale(1.015); box-shadow:var(--shadow-lg) }
/* 1 pieza grande (2x2) + 4 chicas = bloque de 4 columnas x 2 filas, sin huecos */
.gal--big{ grid-column:span 2; grid-row:span 2 }
.gal__cap{
  position:absolute; left:16px; right:16px; bottom:14px; z-index:1;
  color:#fff; font-size:.88rem; font-weight:600; text-align:left; text-shadow:0 1px 6px rgba(0,0,0,.4);
}

/* ── Testimonios ───────────────────────────────────────── */
.quote{
  margin:0; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px; position:relative;
}
.quote::before{
  content:"\201C"; font-family:var(--serif); font-size:4rem; color:var(--clay);
  opacity:.22; position:absolute; top:6px; right:20px; line-height:1;
}
.quote blockquote{ margin:0 0 18px; font-family:var(--serif); font-size:1.08rem; color:var(--ink); line-height:1.5 }
.quote figcaption strong{ display:block; color:var(--ink); font-size:.95rem }
.quote figcaption span{ font-size:.85rem; color:var(--muted) }

/* ── FAQ ───────────────────────────────────────────────── */
.faq{ display:grid; gap:10px }
.faq__i{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.faq__i summary{
  cursor:pointer; list-style:none; padding:18px 52px 18px 22px; position:relative;
  font-weight:600; color:var(--ink); font-size:1.02rem;
}
.faq__i summary::-webkit-details-marker{ display:none }
.faq__i summary::after{
  content:""; position:absolute; right:22px; top:50%; width:12px; height:12px;
  margin-top:-7px; border-right:2px solid var(--clay); border-bottom:2px solid var(--clay);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq__i[open] summary::after{ transform:rotate(-135deg); margin-top:-3px }
.faq__i[open] summary{ background:var(--clay-soft) }
.faq__c{ padding:16px 22px 22px }
.faq__c p{ margin:0; color:var(--muted); font-size:.96rem }

/* ── CTA / contacto ────────────────────────────────────── */
.section--cta{ background:var(--dark); color:#B9BECF }
.section--cta h2{ color:#FFFFFF }
.section--cta h2 em{ color:var(--gold) }
.contacto{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:start }
.contacto__datos{ display:grid; gap:11px; margin-top:26px; font-size:.96rem }
.contacto__datos li{ display:flex; gap:11px; align-items:center }
.contacto__datos a{ color:#E9ECF5; text-decoration:underline; text-underline-offset:3px }
.contacto__datos a:hover{ color:#fff }

.form{ background:var(--bg-2); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-lg) }
.form__row{ margin-bottom:16px }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:6px }
.form label span{ color:var(--clay) }
.form input,.form select,.form textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  background:var(--bg); font-size:.96rem; transition:border-color .18s ease, background .18s ease;
}
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--clay); background:#fff }
.form input::placeholder,.form textarea::placeholder{ color:#B0A79B }
.form textarea{ resize:vertical; min-height:84px }
.form .is-bad{ border-color:#C0392B; background:#FDF3F2 }
.form__nota{ margin:12px 0 0; font-size:.8rem; color:var(--muted); text-align:center }
.form__error{ margin:10px 0 0; font-size:.86rem; color:#C0392B; text-align:center }

/* ── Footer ────────────────────────────────────────────── */
.footer{ background:var(--dark); color:#9198AF; padding-top:56px; font-size:.92rem }
.footer__in{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; padding-bottom:40px }
.footer__col p{ margin:14px 0 0; max-width:34ch; font-size:.9rem }
.footer h4{ color:var(--gold); font-family:var(--sans); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px }
.footer ul{ display:grid; gap:9px }
.footer a{ color:#ADB3C7; text-decoration:none }
.footer a:hover{ color:#fff; text-decoration:underline }
.footer__bottom{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.1); padding-block:20px; font-size:.82rem;
}
.footer__bottom p{ margin:0 }

/* ── WhatsApp flotante ─────────────────────────────────── */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--wa); color:#fff;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.75);
  transition:transform .2s ease;
}
.wa-float:hover{ transform:scale(1.08) }

/* ── Lightbox ──────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  background:rgba(20,18,16,.92); padding:28px;
}
.lb[hidden]{ display:none }
.lb__fig{ margin:0; max-width:1000px; width:100% }
.lb__img{
  display:block; width:100%; max-height:78vh; object-fit:contain;
  border-radius:var(--r); box-shadow:var(--shadow-lg);
}
.lb__fig figcaption{ color:#E4DDD3; text-align:center; margin-top:14px; font-size:.94rem }
.lb__x{
  position:absolute; top:18px; right:24px; background:none; border:0;
  color:#fff; font-size:2.6rem; line-height:1; cursor:pointer; opacity:.75;
}
.lb__x:hover{ opacity:1 }

/* ── Animación de entrada ──────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease }
.reveal.is-in{ opacity:1; transform:none }
.reveal--d1{ transition-delay:.09s }
.reveal--d2{ transition-delay:.18s }
.reveal--d3{ transition-delay:.27s }

@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .reveal{ opacity:1; transform:none }
}

/* ═══ Responsive ═══════════════════════════════════════ */
@media (max-width: 1000px){
  .hero__in{ grid-template-columns:1fr }
  /* En pantalla angosta manda el texto: titular y botones sobre el pliegue, foto después */
  .hero__media{ max-width:520px; margin-inline:auto; width:100% }
  .hero__photo{ aspect-ratio:16/10 }
  .contacto{ grid-template-columns:1fr }
  .footer__in{ grid-template-columns:1fr 1fr }
  .galeria{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px }
  .gal--big{ grid-column:span 2; grid-row:span 1 }
}

@media (max-width: 820px){
  .topbar__in{ gap:14px; font-size:.74rem }
  .burger{ display:block; margin-left:auto }
  .header__cta{ display:none }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; margin:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:8px var(--pad) 18px;
    box-shadow:var(--shadow-lg);
    display:none;
  }
  .nav.is-open{ display:flex }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--line); font-size:1rem }
  .nav a::after{ display:none }
}

@media (max-width: 620px){
  body{ font-size:16px }
  .topbar__item:not(.topbar__item--strong){ display:none }
  .form__grid{ grid-template-columns:1fr }
  .footer__in{ grid-template-columns:1fr; gap:26px }
  .galeria{ grid-template-columns:1fr; grid-auto-rows:190px }
  .gal--big{ grid-column:span 1 }
  .hero__cta .btn{ flex:1 1 100% }
  .wa-float{ width:52px; height:52px; right:16px; bottom:16px }
  .form{ padding:22px }
}