:root{--navy:#092f72;--pink:#ff4f82;--blue:#2f83d8;--purple:#a45cdb;--orange:#ff7d34}
*{box-sizing:border-box}html,body{margin:0;background:#fff;color:var(--navy);font-family:Arial,Helvetica,sans-serif}body{font-size:16px}.shell{width:min(1180px,94vw);margin:auto}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:700}a{text-decoration:none;color:inherit;cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:28px;padding:14px 25px;font-weight:700}.pink{background:var(--pink);color:white}.outline{border:2px solid var(--blue);background:white}.topbar{height:98px;position:absolute;z-index:20;top:0;left:0;right:0}.nav{height:98px;display:grid;grid-template-columns:190px 1fr 180px;align-items:center;gap:18px}.logo{width:168px;height:82px;object-fit:contain}.nav nav{display:flex;justify-content:center;gap:40px;font-weight:700;font-size:15px}.nav nav a{padding:34px 0 12px}.nav nav .active{border-bottom:3px solid var(--pink)}.navcta{justify-self:end;font-size:14px;padding:12px 21px}
.hero{height:620px;position:relative;overflow:hidden;background:#fff}.hero-photo{position:absolute;right:0;top:0;height:620px;width:76%;object-fit:cover;object-position:center}.hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fff 21%,rgba(255,255,255,.94) 30%,rgba(255,255,255,.55) 44%,rgba(255,255,255,.05) 59%,transparent 70%)}.hero-inner{position:relative;height:100%;padding-top:115px}.hero-copy{width:450px;position:relative;z-index:5}.online-pill{display:inline-flex;align-items:center;gap:8px;background:#edf5fb;border-radius:25px;padding:8px 16px;font-size:12px;font-weight:700;line-height:1.15;margin-bottom:22px}.online-pill span{font-size:27px;color:var(--pink)}h1{font-size:54px;line-height:1.04;margin:0 0 20px;letter-spacing:-1.2px}h1 em{font-style:normal;color:var(--pink)}.hero-copy p{font-size:16px;line-height:1.55;width:430px;margin:0 0 26px}.actions{display:flex;gap:18px}.seeds{position:absolute;color:#c66bb4;font-size:42px;transform:rotate(-30deg)}.s1{left:37%;top:90px}.s2{left:47%;top:140px}.s3{left:55%;top:75px}
.issues{padding:24px 0 32px;background:#fff}.issues h2,.services h2{text-align:center;font-size:31px;margin:0 0 24px}.issue-row{display:grid;grid-template-columns:repeat(8,1fr)}.issue{text-align:center;min-height:172px;padding:0 12px;border-right:1px solid #ddd}.issue:last-child{border:0}.issue svg{width:64px;height:64px;fill:none;stroke:var(--pink);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}.issue.blue svg{stroke:var(--blue)}.issue.purple svg{stroke:var(--purple)}.issue p{font-size:13px;font-weight:700;line-height:1.55;margin:0}.alone{text-align:center;font-size:14px;margin:20px 0 12px}.explore{display:block;width:510px;max-width:90%;margin:auto;background:linear-gradient(90deg,#2d81d3,#397fd0);color:#fff;text-align:center;padding:11px;border-radius:24px;font-size:20px;font-weight:700}
.understand{background:linear-gradient(90deg,#fff8fb,#fff);padding:24px 0}.understand-grid{display:grid;grid-template-columns:285px 1fr;gap:28px;align-items:center}.understand-copy{position:relative}.understand-copy h2{font-size:29px;line-height:1.05;margin:0 0 18px}.understand-copy p{font-size:14px;line-height:1.5;max-width:225px}.understand-copy .btn{font-size:13px;padding:12px 19px;margin-top:8px}.dandelions{position:absolute;right:5px;top:25px;color:#c875b9;font-size:34px;line-height:1.8;transform:rotate(-22deg)}.dandelions span{margin-left:30px}.story-photo{height:350px;position:relative;border-radius:22px;overflow:hidden}.story-photo>img{width:100%;height:100%;object-fit:cover;object-position:center}.story-photo blockquote{position:absolute;right:18px;top:15px;bottom:15px;width:42%;margin:0;background:#fff;border-radius:18px;padding:28px 30px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 5px 18px rgba(0,0,0,.08)}.story-photo blockquote b,.story-photo blockquote i{font-family:Georgia,serif;color:var(--pink);font-size:70px;line-height:.55;font-style:normal}.story-photo blockquote i{align-self:flex-end;margin-top:8px}.story-photo blockquote span{font-family:Georgia,serif;font-size:34px;line-height:1.12;font-weight:700;color:var(--navy);margin:12px 0}
.services{padding:18px 0 22px}.services h2{margin-bottom:18px}.service-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.svc{min-height:250px;border-radius:14px;padding:18px 14px 14px;text-align:center;display:flex;flex-direction:column;align-items:center}.c1,.c4{background:#edf3fd}.c2,.c3{background:#fff0f4}.c5{background:#fff3ea}.c6{background:#f6eef9}.svcicon{font-size:47px;line-height:1;color:var(--blue);height:58px}.c2 .svcicon,.c3 .svcicon{color:var(--pink)}.c5 .svcicon{color:var(--orange)}.c6 .svcicon{color:var(--purple)}.svc h3{font-size:13px;margin:9px 0 8px}.svc p{font-size:12px;line-height:1.55;margin:0;flex:1}.svc a{font-size:12px;color:var(--pink);margin-top:12px}
.online{padding:0 0 28px}.onlinebox{min-height:220px;border-radius:18px;background:linear-gradient(90deg,#d6edff,#bfe2fb);display:grid;grid-template-columns:1.1fr 1fr .75fr;align-items:center;gap:25px;padding:22px 36px}.onlinebox h2{font-size:28px;margin:0 0 8px}.onlinebox p{font-size:13px;line-height:1.45;margin:0 0 10px}.onlinebox ul{list-style:none;padding:0;margin:0;font-size:13px;line-height:1.8}.onlinebox li:before{content:"✓";display:inline-grid;place-items:center;background:white;color:var(--blue);width:19px;height:19px;border-radius:50%;margin-right:9px;font-weight:700}.onlinebox img{width:100%;height:170px;object-fit:cover;border-radius:4px}.online-cta{text-align:center}.online-cta .btn{min-width:190px}.online-cta span{display:block;font-size:58px;color:var(--pink);transform:rotate(-14deg);margin-top:8px}
@media(max-width:900px){.nav nav{display:none}.nav{grid-template-columns:1fr auto}.hero-photo{width:100%;opacity:.45}.hero-fade{background:rgba(255,255,255,.55)}.hero-copy{width:90%}.issue-row{grid-template-columns:repeat(4,1fr);gap:20px}.issue{border:0}.understand-grid{grid-template-columns:1fr}.service-row{grid-template-columns:repeat(2,1fr)}.onlinebox{grid-template-columns:1fr}.story-photo blockquote span{font-size:28px}}

/* V2: cambios solicitados sobre el último mockup aprobado */
.nav{grid-template-columns:220px 1fr 180px}
.logo{width:210px;height:96px;object-fit:contain}
.hero-photo{right:0;top:0;width:68%;height:620px;object-fit:cover;object-position:center center}
.svcicon{width:64px;height:64px;display:flex;align-items:center;justify-content:center}
.svcicon img{display:block;width:60px;height:60px}


/* V3 — HERO CEÑIDO A LOS MÁRGENES DE LA WEB Y DEBAJO DEL MENÚ */
.topbar{
  position:relative !important;
  height:98px !important;
  background:#fff !important;
}

.hero{
  width:min(1180px,94vw) !important;
  height:510px !important;
  min-height:510px !important;
  margin:0 auto !important;
  border-radius:18px !important;
  overflow:hidden !important;
  position:relative !important;
  background:#fff !important;
}

/* La foto ya no es panorámica a toda pantalla.
   Se ciñe al contenedor del hero y queda bajo el menú. */
.hero-photo{
  position:absolute !important;
  right:0 !important;
  top:0 !important;
  width:64% !important;
  height:510px !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:0 18px 18px 0 !important;
}

/* Degradado dentro del propio hero, no fuera de sus márgenes */
.hero-fade{
  position:absolute !important;
  inset:0 !important;
  border-radius:18px !important;
  background:linear-gradient(
    90deg,
    #fff 0%,
    #fff 23%,
    rgba(255,255,255,.98) 30%,
    rgba(255,255,255,.84) 38%,
    rgba(255,255,255,.38) 49%,
    rgba(255,255,255,.08) 58%,
    rgba(255,255,255,0) 66%
  ) !important;
}

.hero-inner{
  height:510px !important;
  padding-top:28px !important;
}

.hero-copy{
  width:430px !important;
}

.hero-copy h1{
  font-size:50px !important;
  line-height:1.04 !important;
  margin-bottom:18px !important;
}

.hero-copy p{
  width:410px !important;
  font-size:15px !important;
  line-height:1.5 !important;
}

.online-pill{
  margin-bottom:16px !important;
}

/* Semillas decorativas recolocadas dentro del hero */
.s1{left:38% !important;top:42px !important}
.s2{left:47% !important;top:92px !important}
.s3{left:54% !important;top:34px !important}

@media(max-width:900px){
  .hero{
    width:min(94vw,760px) !important;
    height:auto !important;
    min-height:650px !important;
  }
  .hero-photo{
    width:100% !important;
    height:330px !important;
    top:auto !important;
    bottom:0 !important;
    border-radius:0 0 18px 18px !important;
  }
  .hero-fade{
    background:linear-gradient(
      180deg,
      #fff 0%,
      rgba(255,255,255,.98) 46%,
      rgba(255,255,255,.55) 63%,
      rgba(255,255,255,0) 78%
    ) !important;
  }
  .hero-inner{
    min-height:650px !important;
    height:auto !important;
    padding-top:28px !important;
  }
  .hero-copy{
    width:92% !important;
  }
}

/* Ajustes aprobados por el usuario */
.logo{
  width:210px !important;
  height:96px !important;
  object-fit:contain !important;
}

/* Imagen exacta aportada por el usuario, contenida en los márgenes del hero */
.hero{
  width:min(1180px,94vw) !important;
  margin:0 auto !important;
}
.hero-photo{
  right:0 !important;
  top:0 !important;
  width:64% !important;
  height:510px !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Cita: 25% más estrecha, misma fuente y mismo tamaño */
.story-photo blockquote{
  width:31.5% !important; /* 42% x 0.75 */
  padding-left:24px !important;
  padding-right:24px !important;
}
.story-photo blockquote span{
  font-size:34px !important;
  line-height:1.12 !important;
}
@media(max-width:900px){
  .story-photo blockquote{
    width:42% !important;
  }
}

/* Sustitución de caracteres extraños por dientes de león SVG reales */
.online-pill{
  gap:9px !important;
  align-items:center !important;
}
.online-wifi{
  width:31px !important;
  height:25px !important;
  flex:0 0 auto;
}

/* Semillas reales sobre la primera fotografía */
.seed{
  position:absolute;
  width:45px;
  height:auto;
  z-index:4;
  opacity:.82;
  pointer-events:none;
}
.seed.s1{left:37% !important;top:90px !important;transform:rotate(-21deg)}
.seed.s2{left:47% !important;top:140px !important;transform:rotate(11deg)}
.seed.s3{left:55% !important;top:75px !important;transform:rotate(-34deg)}

/* Dientes de león reales entre el texto y la imagen */
.dandelions{
  position:absolute !important;
  right:-4px !important;
  top:18px !important;
  width:86px !important;
  height:255px !important;
  transform:none !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  pointer-events:none;
}
.dandelions img{
  position:absolute;
  width:48px;
  height:auto;
  opacity:.82;
}
.dandelions .d1{
  top:0;
  right:5px;
  transform:rotate(-18deg) scale(.92);
}
.dandelions .d2{
  top:83px;
  right:28px;
  transform:rotate(11deg) scale(.76);
}
.dandelions .d3{
  top:157px;
  right:2px;
  transform:rotate(-13deg) scale(.88);
}

@media(max-width:900px){
  .seed{display:none}
  .dandelions{right:8px !important}
}

/* Cambios solicitados — sobre la última Home aprobada */

/* 1) Sin dientes de león/semillas sobre la primera imagen */
.seed{display:none !important}

/* 2) Texto principal +2 puntos */
.hero-copy p{
  font-size:17px !important;
}

/* 3) Cita -2 puntos, sin tocar el resto del bloque */
.story-photo blockquote span{
  font-size:32px !important;
}

/* 5) Iconos exactos recortados del mockup maestro */
.issue svg{display:none !important}
.issue-icon-exacto{
  width:64px !important;
  height:64px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto 10px !important;
}

/* 4) APEGO Y VÍNCULO: icono exacto del mockup */
.svc.c4 .svcicon img{
  width:64px !important;
  height:64px !important;
  object-fit:contain !important;
}

/* 6) Destacar frase */
.alone{
  font-size:17px !important;
  font-weight:700 !important;
  color:var(--navy) !important;
  margin-top:22px !important;
  margin-bottom:14px !important;
}

/* Ajustes siguientes solicitados */

/* 1. Iconos de servicios tomados directamente del mockup maestro */
.svcicon{
  width:68px !important;
  height:68px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.svcicon img{
  width:68px !important;
  height:68px !important;
  object-fit:contain !important;
}

/* 2. Párrafo del hero: +2 puntos adicionales */
.hero-copy p{
  font-size:19px !important;
  line-height:1.5 !important;
}

/* 3. Cita: -2 puntos adicionales */
.story-photo blockquote span{
  font-size:30px !important;
  line-height:1.12 !important;
}

/* Corazón final siguiendo el lenguaje gráfico del bloque online */
.story-photo blockquote .quote-heart{
  align-self:flex-end !important;
  margin-top:7px !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:56px !important;
  font-weight:400 !important;
  line-height:.8 !important;
  color:var(--pink) !important;
  transform:rotate(-14deg) !important;
}

/* Iconos de servicios diseñados desde cero */
.svcicon{
  width:72px !important;
  height:72px !important;
  margin:0 auto 4px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.svcicon img{
  width:68px !important;
  height:68px !important;
  object-fit:contain !important;
  display:block !important;
}

/* Ajustes aprobados: logo +10% y mayor protagonismo del mensaje */

/* Logo: 210px -> 231px (+10%) */
.nav{
  grid-template-columns:242px 1fr 180px !important;
}
.logo{
  width:231px !important;
  height:106px !important;
  object-fit:contain !important;
}

/* Dar algo más de protagonismo sin cambiar la estructura */
.alone{
  font-size:19px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  color:var(--navy) !important;
  margin-top:24px !important;
  margin-bottom:16px !important;
  letter-spacing:-0.15px !important;
}