/* ==========================================================================
   NOELIA · Hoja de estilos
   Paleta tomada del logo: verde petróleo, verdes oliva, crema y navy.
   ========================================================================== */

:root{
  /* Colores — tomados del logo NoelIA (azul petróleo, verde salvia, onda celeste) */
  --teal-900:#0F3D57;
  --teal-700:#1A5E82;
  --teal-500:#2492B2;
  --teal-300:#5FC0DC;
  --teal-100:#CDEAF4;
  --teal-50:#E7F5FA;

  --olive-500:#6E8C72;
  --olive-300:#A9C7AE;
  --green-500:#6BA85B;
  --green-600:#3F7A46;

  --sun-500:#E5A03F;
  --sun-100:#FCEEDA;

  --terra-600:#C2764A;
  --terra-100:#FAE8DA;

  --navy-900:#14212E;
  --navy-700:#33424F;
  --gray-500:#626F78;

  --cream-50:#FCFAF6;
  --cream-100:#F7F3EA;
  --cream-200:#EDE6DA;
  --sand-300:#E0D6C5;

  --white:#FFFFFF;

  /* Tipografía */
  --font-title:'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-body:'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Medidas */
  --radius-sm:12px;
  --radius:20px;
  --radius-lg:28px;
  --shadow-sm:0 2px 10px rgba(22,33,44,.06);
  --shadow:0 10px 30px rgba(22,33,44,.08);
  --shadow-lg:0 20px 50px rgba(22,33,44,.12);
  --wrap:1160px;
}

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

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.7;
  color:var(--navy-700);
  background:var(--cream-50);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-title);
  color:var(--navy-900);
  line-height:1.2;
  margin:0 0 .6em;
  font-weight:800;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);}
h3{font-size:1.25rem;}
h4{font-size:1.05rem;}

p{margin:0 0 1.1em;}
a{color:var(--teal-700);text-decoration:none;transition:color .2s;}
a:hover{color:var(--teal-900);}
img{max-width:100%;height:auto;display:block;}
ul{margin:0 0 1.1em;padding-left:1.2em;}
li{margin-bottom:.4em;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.narrow{max-width:760px;}
.center{text-align:center;}
.lead{font-size:1.18rem;color:var(--navy-700);}
.muted{color:var(--gray-500);}
.mb0{margin-bottom:0;}

section{padding:84px 0;}
.section-cream{background:var(--cream-100);}
.section-teal{background:linear-gradient(150deg,var(--teal-900) 0%,#16587A 100%);color:#DCEEF5;}
.section-teal h2,.section-teal h3{color:var(--white);}
.section-teal a{color:var(--olive-300);}

.section-head{max-width:720px;margin:0 auto 52px;text-align:center;}
.section-head p{font-size:1.1rem;color:var(--gray-500);margin-bottom:0;}

.eyebrow{
  display:inline-block;
  font-family:var(--font-title);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#15607C;
  background:var(--teal-100);
  padding:7px 16px;
  border-radius:999px;
  margin-bottom:18px;
}
.section-teal .eyebrow{color:var(--olive-300);background:rgba(255,255,255,.08);}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-title);
  font-weight:700;
  font-size:1rem;
  padding:15px 30px;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s, box-shadow .18s, background .18s, color .18s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(135deg,var(--teal-700),var(--teal-500));color:var(--white);box-shadow:0 4px 14px rgba(36,146,178,.28);}
.btn-primary:hover{background:linear-gradient(135deg,var(--teal-900),var(--teal-700));color:var(--white);box-shadow:0 8px 22px rgba(36,146,178,.36);}
.btn-ghost{background:transparent;color:var(--teal-900);border-color:var(--sand-300);}
.btn-ghost:hover{border-color:var(--teal-700);color:var(--teal-900);background:var(--white);}
.btn-light{background:var(--white);color:var(--teal-900);}
.btn-light:hover{color:var(--teal-900);box-shadow:var(--shadow);}
.btn-outline-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4);}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:var(--white);color:var(--white);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}
.btn-row.center{justify-content:center;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(252,250,246,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cream-200);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px 24px;max-width:var(--wrap);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:50px;width:auto;}
.brand span{
  display:block;font-family:var(--font-title);font-weight:600;
  font-size:.82rem;letter-spacing:.06em;color:var(--teal-700);
  border-left:1px solid var(--sand-300);padding-left:12px;line-height:1.3;
}
@media (max-width:560px){.brand span{display:none;}}

.nav{display:flex;align-items:center;gap:4px;}
.nav a{
  font-family:var(--font-title);
  font-weight:700;font-size:.97rem;
  color:var(--navy-700);
  padding:9px 14px;border-radius:999px;
  transition:background .2s,color .2s;
}
.nav a:hover{background:var(--cream-200);color:var(--navy-900);}
.nav a.active{background:var(--teal-700);color:var(--white);}
.nav .btn{margin-left:8px;padding:11px 22px;font-size:.95rem;}
/* El botón del menú necesita más especificidad que `.nav a`, si no hereda el color oscuro */
.nav a.btn-primary,
.nav a.btn-primary:hover,
.nav a.btn-primary.active{color:var(--white);}
.nav a.btn-primary:hover{background:var(--teal-900);}

.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  padding:8px;color:var(--navy-900);
}
.nav-toggle svg{width:28px;height:28px;}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(155deg,#FFF9EE 0%,var(--teal-50) 45%,#DFF1F7 100%);
  padding:76px 0 84px;
  position:relative;overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:center;
}
.hero h1{margin-bottom:.35em;}
.hero .lead{font-size:1.24rem;margin-bottom:1.6em;}
.hero-photo{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  transform:rotate(-1.2deg);
}
.hero-photo img{width:100%;}
.hero-note{
  display:flex;align-items:center;gap:12px;
  margin-top:26px;font-size:.95rem;color:var(--gray-500);
}
.hero-note svg{width:22px;height:22px;color:var(--olive-500);flex-shrink:0;}

/* Cabecera simple para páginas internas */
.page-hero{
  background:linear-gradient(155deg,#FFF9EE 0%,var(--teal-50) 45%,#DFF1F7 100%);
  padding:70px 0 64px;text-align:center;
}
.page-hero h1{margin-bottom:.3em;}
.page-hero p{max-width:640px;margin:0 auto;font-size:1.15rem;color:var(--navy-700);}

/* ---------- Grids y tarjetas ---------- */
.grid{display:grid;gap:26px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--white);
  border:1px solid var(--cream-200);
  border-radius:var(--radius);
  padding:32px 28px;
  box-shadow:var(--shadow-sm);
  transition:transform .22s, box-shadow .22s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card h3{margin-bottom:.45em;}
.card p:last-child{margin-bottom:0;}

.icon-badge{
  width:56px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-100);color:#15607C;
  margin-bottom:20px;
}
.icon-badge svg{width:28px;height:28px;}
.icon-badge.olive{background:#DFEFD8;color:var(--green-600);}
.icon-badge.terra{background:var(--terra-100);color:var(--terra-600);}
.icon-badge.sand{background:var(--cream-200);color:var(--navy-900);}
.icon-badge.sky{background:#D7E9FA;color:#25689B;}
.icon-badge.moss{background:#DCEFDC;color:#3E7A4A;}
.icon-badge.plum{background:#E7E0F5;color:#5A4B90;}

/* ---------- Módulos / productos ---------- */
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.module{
  background:var(--white);border:1px solid var(--cream-200);
  border-radius:var(--radius);padding:30px 26px;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .22s, box-shadow .22s, border-color .22s;
}
.module::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--accent,var(--teal-500));
}
.module:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--sand-300);}
.module .num{
  position:absolute;top:20px;right:24px;
  font-family:var(--font-title);font-weight:800;font-size:2.1rem;
  color:var(--cream-200);line-height:1;
}
.module h3{margin-bottom:.5em;padding-right:38px;}
.module p{font-size:.98rem;margin-bottom:.9em;}
.module ul{list-style:none;padding:0;margin:0;font-size:.93rem;color:var(--gray-500);}
.module li{position:relative;padding-left:16px;margin-bottom:5px;}
.module li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent,var(--teal-500));
}
@media (max-width:960px){.modules{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.modules{grid-template-columns:1fr;}}

/* Diagrama de flujo */
.flow{max-width:960px;margin:0 auto;}
.flow img{width:100%;}

/* Pasos numerados */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:step;}
.step{position:relative;padding-top:14px;}
.step-num{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(140deg,var(--teal-500),var(--green-500));color:var(--white);
  font-family:var(--font-title);font-weight:800;font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;box-shadow:var(--shadow-sm);
}

/* Bloques alternados texto + imagen */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.split.reverse .split-media{order:2;}
.split-media img{border-radius:var(--radius);box-shadow:var(--shadow);}
.split ul{list-style:none;padding:0;}
.split ul li{
  position:relative;padding-left:34px;margin-bottom:12px;
}
.split ul li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:20px;height:20px;border-radius:50%;
  background:var(--teal-50);
  border:2px solid var(--teal-500);
}

/* Lista con check */
.check-list{list-style:none;padding:0;}
.check-list li{position:relative;padding-left:32px;margin-bottom:11px;}
.check-list li::before{
  content:"";position:absolute;left:4px;top:.55em;
  width:9px;height:16px;border:solid var(--green-500);
  border-width:0 3px 3px 0;transform:rotate(45deg);
}

/* Pantallas de la app */
.screens{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;}
.screen{
  width:212px;border-radius:26px;overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid var(--cream-200);
  background:var(--white);
}
.screen:nth-child(odd){transform:translateY(14px);}

/* ---------- Dispositivos / sensores ---------- */
.devices{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.device{
  background:var(--white);border:1px solid var(--cream-200);
  border-radius:var(--radius-sm);padding:22px 18px;text-align:center;
  transition:border-color .2s, transform .2s;
}
.device:hover{border-color:var(--teal-500);transform:translateY(-3px);}
.device svg{width:30px;height:30px;color:var(--teal-700);margin-bottom:10px;}
.device strong{display:block;font-family:var(--font-title);color:var(--navy-900);font-size:1rem;}
.device small{color:var(--gray-500);font-size:.87rem;line-height:1.45;display:block;margin-top:4px;}

/* ---------- Planes ---------- */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;align-items:start;}
.plan{
  background:var(--white);border:2px solid var(--cream-200);
  border-radius:var(--radius-lg);padding:40px 34px;position:relative;
  box-shadow:var(--shadow-sm);
}
.plan.featured{border-color:var(--sun-500);box-shadow:0 14px 38px rgba(229,160,63,.20);}
.plan-tag{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:var(--sun-500);color:var(--navy-900);
  font-family:var(--font-title);font-weight:800;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:7px 20px;border-radius:999px;white-space:nowrap;
}
.plan-name{font-family:var(--font-title);font-size:1.7rem;font-weight:800;color:var(--navy-900);margin-bottom:6px;}
.plan-desc{color:var(--gray-500);font-size:1rem;margin-bottom:22px;}
.plan-price{
  font-family:var(--font-title);font-weight:800;font-size:1.5rem;
  color:var(--teal-500);padding:18px 0;margin-bottom:22px;
  border-top:1px solid var(--cream-200);border-bottom:1px solid var(--cream-200);
}
.plan-price{font-size:2.5rem;}
.plan-price .per{font-size:1rem;font-weight:600;color:var(--gray-500);font-family:var(--font-body);}
.plan-price small{display:block;font-size:.9rem;font-weight:400;color:var(--navy-700);font-family:var(--font-body);margin-top:8px;}
.fineprint{
  background:var(--cream-100);border:1px solid var(--cream-200);
  border-radius:var(--radius-sm);padding:22px 26px;
  font-size:.92rem;color:var(--gray-500);
}
.fineprint ul{list-style:none;padding:0;margin:0;}
.fineprint li{position:relative;padding-left:18px;margin-bottom:7px;}
.fineprint li::before{content:"·";position:absolute;left:5px;font-weight:800;color:var(--teal-500);}
.fineprint li:last-child{margin-bottom:0;}
.plan .check-list{margin-bottom:28px;}
.plan .btn{width:100%;text-align:center;}

/* Tabla comparativa */
.table-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow-sm);}
table.compare{
  width:100%;border-collapse:collapse;background:var(--white);
  min-width:560px;font-size:1rem;
}
table.compare th,table.compare td{
  padding:16px 20px;text-align:left;border-bottom:1px solid var(--cream-200);
}
table.compare thead th{
  background:linear-gradient(135deg,var(--teal-900),var(--teal-700));color:var(--white);
  font-family:var(--font-title);font-weight:700;
}
table.compare thead th:not(:first-child),
table.compare td:not(:first-child){text-align:center;width:170px;}
table.compare tbody tr:nth-child(even){background:var(--cream-50);}
table.compare tbody tr:last-child td{border-bottom:0;}
.yes{color:var(--green-600);font-weight:800;}
.no{color:#C9C2B4;}

/* Tabla de tres columnas de texto (problema · consecuencia · solución) */
table.compare-3{min-width:720px;}
table.compare-3 th:not(:first-child),
table.compare-3 td:not(:first-child){text-align:left;width:auto;}
table.compare-3 td:first-child{width:24%;}
table.compare-3 td:nth-child(2){width:28%;color:var(--gray-500);}
table.compare-3 td:last-child{width:48%;}

/* ---------- Perfiles / para quién ---------- */
.profile{
  background:var(--white);border:1px solid var(--cream-200);
  border-radius:var(--radius);padding:32px 28px;
  border-top:5px solid var(--teal-700);
}
.profile:nth-child(2){border-top-color:var(--green-500);}
.profile:nth-child(3){border-top-color:var(--sun-500);}
.profile:nth-child(4){border-top-color:var(--teal-300);}
.profile h3{margin-bottom:.4em;}
.profile .check-list li{font-size:.98rem;}

/* ---------- Equipo ---------- */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
.team-single{grid-template-columns:1fr;max-width:560px;margin:0 auto;}
.team-single .member{text-align:center;padding:40px 34px;}
.team-single .member-avatar{margin-left:auto;margin-right:auto;}
.member{
  background:var(--white);border:1px solid var(--cream-200);
  border-radius:var(--radius);padding:34px 30px;
}
.member-avatar{
  width:74px;height:74px;border-radius:50%;
  background:linear-gradient(140deg,var(--teal-500),var(--teal-700));color:var(--white);
  font-family:var(--font-title);font-weight:800;font-size:1.6rem;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.member:nth-child(2) .member-avatar{background:var(--green-500);}
.member h3{margin-bottom:.15em;}
.member .role{color:var(--teal-700);font-weight:700;font-size:.98rem;margin-bottom:14px;}

/* ---------- Estadísticas / cifras ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center;}
.stat strong{
  display:block;font-family:var(--font-title);font-weight:800;
  font-size:2.6rem;color:var(--olive-300);line-height:1.1;
}
.stat span{font-size:1rem;}

/* ---------- Cita ---------- */
.quote{
  max-width:760px;margin:0 auto;text-align:center;
  font-family:var(--font-title);font-size:clamp(1.3rem,2.6vw,1.75rem);
  font-weight:700;color:var(--navy-900);line-height:1.45;
}
.quote cite{
  display:block;margin-top:20px;font-family:var(--font-body);
  font-size:1rem;font-style:normal;font-weight:400;color:var(--gray-500);
}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;}
.faq details{
  background:var(--white);border:1px solid var(--cream-200);
  border-radius:var(--radius-sm);margin-bottom:14px;overflow:hidden;
}
.faq details[open]{border-color:var(--teal-500);}
.faq summary{
  cursor:pointer;list-style:none;display:block;
  padding:20px 56px 20px 24px;position:relative;
  font-family:var(--font-title);font-weight:700;font-size:1.05rem;
  color:var(--navy-900);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:24px;top:50%;
  width:10px;height:10px;margin-top:-7px;
  border:solid var(--teal-700);border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);transition:transform .22s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;}
.faq .faq-body{padding:0 24px 22px;color:var(--navy-700);}
.faq .faq-body p:last-child{margin-bottom:0;}

/* ---------- Contacto ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}
.contact-item{display:flex;gap:16px;margin-bottom:26px;align-items:flex-start;}
.contact-item svg{width:24px;height:24px;color:var(--teal-700);flex-shrink:0;margin-top:5px;}
.contact-item strong{display:block;font-family:var(--font-title);color:var(--navy-900);}
.contact-item a,.contact-item span{color:var(--navy-700);}

form.contact-form{
  background:var(--white);border:1px solid var(--cream-200);
  border-radius:var(--radius);padding:36px;box-shadow:var(--shadow-sm);
}
.field{margin-bottom:20px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
label{
  display:block;font-family:var(--font-title);font-weight:700;
  font-size:.94rem;color:var(--navy-900);margin-bottom:7px;
}
input,select,textarea{
  width:100%;padding:14px 16px;font-family:var(--font-body);font-size:1rem;
  color:var(--navy-900);background:var(--cream-50);
  border:1.5px solid var(--cream-200);border-radius:var(--radius-sm);
  transition:border-color .2s,background .2s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--teal-500);background:var(--white);
}
textarea{resize:vertical;min-height:130px;}
.form-note{font-size:.87rem;color:var(--gray-500);margin:16px 0 0;}

/* ---------- CTA final ---------- */
.cta{
  background:linear-gradient(135deg,var(--teal-900) 0%,#175877 55%,#1E7A99 100%);color:#DCEEF5;
  border-radius:var(--radius-lg);padding:64px 40px;text-align:center;
}
.cta h2{color:var(--white);}
.cta p{max-width:560px;margin:0 auto 28px;font-size:1.1rem;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-900);color:#9FAEB8;
  padding:64px 0 28px;font-size:.96rem;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;}
.site-footer img{height:52px;width:auto;margin-bottom:16px;background:var(--cream-50);border-radius:10px;padding:8px 12px;}
.site-footer h4{color:var(--white);font-size:1rem;margin-bottom:16px;}
.site-footer ul{list-style:none;padding:0;}
.site-footer a{color:#9FAEB8;}
.site-footer a:hover{color:var(--olive-300);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:44px;padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.88rem;color:#7B8A94;
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr;gap:40px;}
  .split.reverse .split-media{order:0;}
  .grid-4,.devices{grid-template-columns:repeat(2,1fr);}
  .grid-3,.steps,.stats{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero-photo{transform:none;}
}

@media (max-width:820px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--cream-50);padding:14px 20px 22px;
    border-bottom:1px solid var(--cream-200);
    box-shadow:var(--shadow);
  }
  .nav.open{display:flex;}
  .nav a{padding:13px 16px;border-radius:var(--radius-sm);}
  .nav .btn{margin:8px 0 0;text-align:center;}
  .nav-toggle{display:block;}
}

@media (max-width:640px){
  body{font-size:17px;}
  section{padding:60px 0;}
  .grid-2,.grid-4,.devices,.plans,.team,.field-row{grid-template-columns:1fr;}
  .plan,.member,form.contact-form,.cta{padding:32px 24px;}
  .screen{width:190px;}
  .screen:nth-child(odd){transform:none;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
}

/* ---------- Fotografía y color ---------- */

/* Franja de fotos a todo el ancho */
.gallery{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;
}
.gallery figure{
  margin:0;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);position:relative;
  aspect-ratio:4/3;
}
.gallery figure:first-child{aspect-ratio:1/1;grid-row:span 1;}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.gallery figure:hover img{transform:scale(1.04);}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:38px 22px 18px;color:#fff;
  font-family:var(--font-title);font-weight:700;font-size:1.02rem;
  background:linear-gradient(to top,rgba(10,30,45,.78),rgba(10,30,45,0));
}

/* Cabecera de página con foto */
.page-hero.with-photo{
  position:relative;overflow:hidden;color:#fff;
  background:var(--teal-900);
  padding:96px 0 88px;
}
.page-hero.with-photo::before{
  content:"";position:absolute;inset:0;
  background-image:var(--photo);background-size:cover;background-position:center;
  opacity:.72;
}
.page-hero.with-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(15,61,87,.82) 0%,rgba(15,61,87,.55) 55%,rgba(36,146,178,.42) 100%);
}
.page-hero.with-photo .wrap{position:relative;z-index:2;}
.page-hero.with-photo h1{color:#fff;}
.page-hero.with-photo p{color:#DEEAF0;}
.page-hero.with-photo .eyebrow{color:var(--olive-300);background:rgba(255,255,255,.12);}

/* Bloque destacado con color de marca */
.section-mint{
  background:linear-gradient(150deg,#DFF1F7 0%,#E4F1DE 55%,#FFF7E9 100%);
}

/* Imagen suelta con marco cálido */
.framed{
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.framed img{width:100%;}

/* Ilustración del hogar */
.illustration{
  background:var(--white);border:1px solid var(--cream-200);
  border-radius:var(--radius-lg);padding:20px;
  box-shadow:var(--shadow);max-width:820px;margin:0 auto;
}
.illustration img{width:100%;border-radius:var(--radius-sm);}

@media (max-width:900px){
  .gallery{grid-template-columns:1fr 1fr;}
  .gallery figure:first-child{grid-column:span 2;aspect-ratio:16/9;}
}
@media (max-width:600px){
  .gallery{grid-template-columns:1fr;}
  .gallery figure:first-child{grid-column:span 1;aspect-ratio:4/3;}
}

/* ---------- Animación de entrada ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
  .reveal.visible{opacity:1;transform:none;}
}

/* Aviso posterior al envío del formulario */
.form-status{
  margin-top:18px;padding:20px 22px;
  background:var(--teal-50);border:1px solid var(--teal-100);
  border-radius:var(--radius-sm);font-size:.95rem;color:var(--navy-700);
}
.form-status strong{
  display:block;font-family:var(--font-title);
  color:var(--navy-900);margin-bottom:6px;
}
.form-status span{display:block;margin-bottom:14px;}
.form-status .btn{padding:11px 22px;font-size:.92rem;background:var(--white);}

/* ---------- Franja de módulos y promesa ---------- */
.modules-strip{
  text-align:center;font-family:var(--font-title);font-weight:800;
  color:var(--navy-900);font-size:1.05rem;margin:0 0 22px;
}
.modules-strip span{
  display:inline-block;font-weight:700;font-size:.86rem;
  color:#15607C;background:var(--white);
  border:1px solid var(--teal-100);
  padding:6px 14px;border-radius:999px;margin:8px 5px 0;
}
.promise{
  text-align:center;margin:0;font-family:var(--font-title);
  font-weight:700;font-size:1.1rem;color:var(--teal-700);
}

/* ---------- Preguntas que se hace la familia ---------- */
.questions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto;}
.questions span{
  background:var(--white);border:1px solid var(--cream-200);
  border-radius:999px;padding:11px 20px;
  font-size:.98rem;color:var(--navy-700);
  box-shadow:var(--shadow-sm);
}

/* ---------- Pilares: organiza · protege · acompaña ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.pillar{
  border-radius:var(--radius-lg);padding:30px 26px 32px;text-align:center;
  border:1px solid var(--cream-200);
}
.pillar img{width:100%;max-width:290px;margin:0 auto 20px;border-radius:var(--radius-sm);}
.pillar h3{
  font-size:1.4rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.3em;
}
.pillar .pillar-sub{
  font-family:var(--font-title);font-weight:700;font-size:1rem;margin-bottom:1em;
}
.pillar p:last-child{margin-bottom:0;font-size:.97rem;color:var(--navy-700);}
.pillar.organiza{background:#EFF6FD;}
.pillar.organiza .pillar-sub{color:#2A6D9E;}
.pillar.protege{background:#EFF7EC;}
.pillar.protege .pillar-sub{color:var(--green-600);}
.pillar.acompana{background:#FCEFF3;}
.pillar.acompana .pillar-sub{color:#B4426A;}

/* ---------- Listas dentro de los pasos ---------- */
.step-list{list-style:none;padding:0;margin:14px 0 0;font-size:.95rem;color:var(--gray-500);}
.step-list li{position:relative;padding-left:18px;margin-bottom:8px;}
.step-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--teal-300);
}

/* ---------- Diferenciador ---------- */
.nots{
  font-family:var(--font-title);font-weight:700;font-size:1.12rem;
  line-height:1.65;color:var(--navy-900);
  border-left:4px solid var(--teal-300);padding-left:20px;
}
.feature-list{list-style:none;padding:0;margin:26px 0 0;}
.feature-list li{position:relative;padding-left:34px;margin-bottom:18px;}
.feature-list li::before{
  content:"";position:absolute;left:2px;top:.5em;
  width:9px;height:16px;border:solid var(--green-500);
  border-width:0 3px 3px 0;transform:rotate(45deg);
}
.feature-list strong{display:block;font-family:var(--font-title);color:var(--navy-900);}
.feature-list span{display:block;font-size:.96rem;color:var(--gray-500);}

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

/* ---------- Ilustración del hero ---------- */
.hero-ilu{
  background:var(--white);
  border:1px solid var(--cream-200);
  border-radius:var(--radius-lg);
  padding:14px;
  box-shadow:var(--shadow-lg);
}
.hero-ilu img{width:100%;border-radius:var(--radius-sm);}

/* La promesa dentro del hero */
.hero .promise{
  margin:28px 0 0;text-align:left;
  font-size:1.05rem;line-height:1.75;
  border-left:4px solid var(--olive-300);padding-left:18px;
}

/* ---------- Palabra clave de cada público ---------- */
.profile-tag{
  font-family:var(--font-title);font-weight:800;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:#15607C;margin-bottom:.8em;
}
.profile-tag.olive{color:var(--green-600);}
.profile-tag.terra{color:var(--terra-600);}
.profile-tag.sky{color:#25689B;}
.profile .check-list li{font-size:.94rem;}
.profile .check-list strong{color:var(--navy-900);}

/* ---------- Manifiesto ---------- */
.manifesto{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:46px;align-items:start;margin-bottom:64px;
}
.manifesto-img{position:sticky;top:104px;}
.manifesto p{font-size:1.02rem;}
@media (max-width:900px){
  .manifesto{grid-template-columns:1fr;gap:32px;}
  .manifesto-img{position:static;}
}

/* ---------- Cabecera de página con el logo (sin foto) ---------- */
.page-hero.with-logo{padding:84px 0 76px;}
.page-hero.with-logo .hero-logo{
  width:min(360px,72vw);height:auto;margin:0 auto 30px;
}
.page-hero .lead-hero{
  max-width:760px;margin:0 auto;
  font-family:var(--font-title);font-weight:700;
  font-size:clamp(1.12rem,2.1vw,1.4rem);
  line-height:1.5;color:var(--navy-900);
}

/* Con siete secciones el menú necesita algo menos de aire en pantallas medianas */
@media (max-width:1120px){
  .nav a{padding:9px 10px;font-size:.93rem;}
  .nav .btn{margin-left:4px;padding:11px 18px;font-size:.9rem;}
  .brand img{height:44px;}
  .brand span{font-size:.76rem;padding-left:10px;}
}
@media (max-width:940px){
  .brand span{display:none;}
}

/* Frase breve de beneficio en cada perfil */
.profile-lead{
  font-family:var(--font-title);font-weight:700;
  font-size:.98rem;color:var(--navy-900);margin-bottom:.7em;
}

/* Los dispositivos con detalle pasan a tres columnas */
.devices{grid-template-columns:repeat(3,1fr);}
.device{text-align:left;padding:26px 22px;}
.device svg{margin:0 0 12px;}
.device-list{
  list-style:none;padding:0;margin:12px 0 0;
  font-size:.86rem;color:var(--gray-500);line-height:1.55;
}
.device-list li{position:relative;padding-left:15px;margin-bottom:7px;}
.device-list li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:50%;background:var(--teal-300);
}
.device-list strong{color:var(--navy-900);}

/* Frase destacada bajo la cabecera y correo institucional */
.claim{
  max-width:640px;margin:20px auto 0;
  font-family:var(--font-title);font-weight:700;font-style:italic;
  font-size:1.02rem;
}
.cta-mail{font-size:.98rem;margin-bottom:26px;}
.cta-mail a{color:var(--white);text-decoration:underline;}