/* =========================================================
   Home nuevo de Yucandoit — sistema de diseño
   Colores y tipografías en un solo lugar (estilo Otoch)
   ========================================================= */
body.hn{
  --hn-piedra:#F3EEE6;      /* fondo general */
  --hn-crema:#FBF8F3;       /* tarjetas */
  --hn-verde:#2E7D52;       /* botones (único color de acción) */
  --hn-verde-hover:#276B46;
  --hn-verde-profundo:#1F3B2C;
  --hn-verde-banda:#2B5A41;
  --hn-salvia:#DCE8D8;
  --hn-salvia-claro:#CFE6D2;
  --hn-tinta:#2B2622;
  --hn-texto:#4A433D;
  --hn-suave:#6B625A;
  --hn-titulos:"Cormorant Garamond",Georgia,serif;
  --hn-cuerpo:"Montserrat",system-ui,sans-serif;
  margin:0;padding:0;background:var(--hn-piedra);color:var(--hn-tinta);
  font-family:var(--hn-cuerpo);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;
}
body.hn h1,body.hn h2,body.hn h3,body.hn p{letter-spacing:normal}
body.hn h1,body.hn h2{font-family:var(--hn-titulos);font-weight:500;line-height:1.08;color:inherit;margin:0}
body.hn h2{font-size:clamp(2.2rem,4.6vw,3.4rem)}
body.hn h3{font-family:var(--hn-cuerpo);color:inherit;margin:0}
body.hn img{max-width:100%;display:block}
.hn-contenedor{max-width:1200px;margin:0 auto;padding:0 24px}
.hn-angosto{max-width:860px}
.hn-seccion{padding:100px 0}
.hn-eyebrow{display:block;text-transform:uppercase;letter-spacing:.32em;font-size:.75rem;font-weight:500;color:var(--hn-verde);margin-bottom:14px}
.hn-eyebrow-claro{color:var(--hn-salvia-claro)}
.hn-cabecera{text-align:center;max-width:680px;margin:0 auto 54px}
.hn-cabecera p{color:var(--hn-suave);font-weight:300;margin:14px 0 0}
.hn-texto{font-size:1.05rem;font-weight:300;color:var(--hn-texto);margin:18px 0 0}
.hn-texto-claro{font-size:1.05rem;font-weight:300;color:var(--hn-salvia);margin:16px 0 0}
.hn-linea{width:60px;height:2px;background:var(--hn-verde);margin:26px 0}
.hn-micro{margin:16px 0 0;font-size:.75rem;letter-spacing:.08em;color:rgba(243,238,230,.85)}
.hn-micro-oscuro{color:#4A6352}

/* ---------- Botones ---------- */
.hn-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 32px;border-radius:999px;font-family:var(--hn-cuerpo);font-weight:500;font-size:.95rem;letter-spacing:.02em;text-decoration:none;border:1.5px solid transparent;transition:background .2s,transform .15s,color .2s;cursor:pointer}
.hn-btn:hover{transform:translateY(-1px);text-decoration:none}
.hn-btn-chico{min-height:44px;padding:0 24px;font-size:.88rem}
.hn-btn-verde{background:var(--hn-verde);color:#fff}
.hn-btn-verde:hover{background:var(--hn-verde-hover);color:#fff}
.hn-btn-crema{background:var(--hn-piedra);color:var(--hn-verde-profundo);font-weight:600}
.hn-btn-crema:hover{background:#fff;color:var(--hn-verde-profundo)}
.hn-btn-linea{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.hn-btn-linea:hover{background:rgba(255,255,255,.1);color:#fff}
.hn-btn-oscuro-linea{border-color:var(--hn-tinta);color:var(--hn-tinta);background:transparent}
.hn-btn-oscuro-linea:hover{background:var(--hn-tinta);color:#fff}
.hn-btn-doble{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;padding:8px 32px;border-radius:12px;background:var(--hn-piedra);color:var(--hn-verde-profundo);text-decoration:none;text-align:center;align-self:flex-start}
.hn-btn-doble span{font-weight:600;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase}
.hn-btn-doble small{font-size:.7rem;color:#3F5A49}
.hn-btn-doble:hover{background:#fff;color:var(--hn-verde-profundo);text-decoration:none}

/* ---------- Encabezado ---------- */
.hn-header{position:fixed;inset:0 0 auto 0;z-index:1020;transition:background .3s,box-shadow .3s}
.hn-header.hn-solido,.hn-header.hn-menu-abierto{background:rgba(31,59,44,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px -16px rgba(0,0,0,.5)}
.hn-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.hn-marca img{height:32px;width:auto}
.hn-menu{display:flex;align-items:center;gap:26px}
.hn-menu > a{color:#F3EEE6;text-decoration:none;font-size:.9rem;letter-spacing:.04em}
.hn-menu > a:hover{color:#fff}
.hn-menu > a.hn-btn{color:#fff}
.hn-menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.9rem;width:44px;height:44px;cursor:pointer;line-height:1}

/* ---------- Portada ---------- */
.hn-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:130px 24px 240px;overflow:hidden;background:var(--hn-verde-profundo)}
.hn-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hn-hero-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,38,28,.62) 0%,rgba(18,38,28,.5) 45%,rgba(18,38,28,.78) 84%,var(--hn-piedra) 100%)}
.hn-hero-contenido{position:relative;max-width:780px}
body.hn .hn-hero h1{font-size:clamp(3.2rem,7.5vw,5.8rem);color:#fff;margin-bottom:20px;text-shadow:0 2px 28px rgba(0,0,0,.4)}
body.hn .hn-hero h1 em{font-style:italic;color:var(--hn-salvia-claro)}
.hn-hero-contenido > p:not(.hn-micro){font-size:1.1rem;font-weight:300;color:#E6DFD4;max-width:580px;margin:0 auto 34px}
.hn-acciones{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- Tarjetas ---------- */
.hn-tarjetas-seccion{position:relative;z-index:2;margin-top:-170px;padding-bottom:30px}
.hn-tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hn-tarjeta{background:var(--hn-crema);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 60px -24px rgba(31,59,44,.45);transition:transform .25s}
.hn-tarjeta:hover{transform:translateY(-6px)}
.hn-tarjeta-foto{position:relative;height:240px;overflow:hidden}
.hn-tarjeta-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.hn-tarjeta:hover .hn-tarjeta-foto img{transform:scale(1.05)}
.hn-cinta{position:absolute;top:16px;left:0;background:var(--hn-verde);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:0 999px 999px 0}
.hn-tarjeta-cuerpo{padding:28px;display:flex;flex-direction:column;gap:12px;flex:1}
.hn-tarjeta h2{font-size:2.1rem}
.hn-meta{margin:0;font-size:.82rem;color:var(--hn-suave);letter-spacing:.04em}
.hn-tarjeta-texto{margin:0;font-size:.95rem;color:var(--hn-texto);flex:1}
.hn-tarjeta .hn-btn{align-self:flex-start}
.hn-tarjeta-oscura{background:#24443A;color:#F3EEE6}
.hn-tarjeta-oscura h2{color:#fff;font-size:2rem}
.hn-tarjeta-oscura .hn-tarjeta-texto{color:#D3DECF}
.hn-tarjeta-oscura .hn-eyebrow{margin-bottom:0;letter-spacing:.24em}
.hn-tarjeta-icono{font-size:2rem;color:var(--hn-salvia-claro)}

/* ---------- Cómo ganas ---------- */
.hn-beneficios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;text-align:center}
.hn-beneficio i{font-size:2.6rem;color:var(--hn-verde)}
.hn-beneficio h3{font-size:1.1rem;font-weight:500;margin:12px 0 8px}
.hn-beneficio p{font-size:.95rem;color:var(--hn-suave);margin:0}
.hn-video-como{margin-top:90px}
.hn-subtitulo{font-family:var(--hn-titulos)!important;font-weight:500;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.1}
.hn-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#2C4A3D;box-shadow:0 30px 60px -24px rgba(31,59,44,.4);max-width:900px;margin:0 auto}
.hn-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hn-video-alto{aspect-ratio:16/9;max-width:none}

/* ---------- Dos columnas ---------- */
.hn-dos-columnas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}

/* ---------- Banda verde: 3 preguntas ---------- */
.hn-banda-verde{background:var(--hn-verde-banda);color:#F3EEE6}
.hn-banda-verde h2{color:#fff}
.hn-banda-verde .hn-dos-columnas{align-items:start}
.hn-preguntas{display:flex;flex-direction:column;gap:26px}
.hn-pregunta{display:flex;gap:16px;align-items:flex-start}
.hn-pregunta i{font-size:1.6rem;color:var(--hn-salvia-claro);line-height:1}
.hn-pregunta h3{font-size:1.1rem;font-weight:600;color:#fff;margin:0 0 4px}
.hn-pregunta p{margin:0;color:var(--hn-salvia);font-size:.95rem}

/* ---------- Galería ---------- */
.hn-galeria-seccion{background:var(--hn-verde-profundo);color:#F3EEE6}
.hn-galeria-seccion h2{color:#fff}
.hn-galeria-seccion .hn-cabecera p{color:#CFDACB}
.hn-galeria{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:230px;gap:12px}
.hn-galeria img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.hn-galeria .hn-g1{grid-column:span 2;grid-row:span 2}

/* ---------- Frase ---------- */
.hn-frase{padding:120px 0;text-align:center;background:var(--hn-salvia)}
.hn-frase .hn-contenedor{max-width:860px}
.hn-frase-texto{font-family:var(--hn-titulos);font-style:italic;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.2;color:var(--hn-tinta);margin:0 0 34px}

/* ---------- Preguntas frecuentes ---------- */
.hn-faq-item{padding:22px 0;border-top:1px solid #D3DDCF}
.hn-faq-item:last-child{border-bottom:1px solid #D3DDCF}
.hn-faq-item h3{font-size:1rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--hn-verde);margin:0 0 6px}
.hn-faq-item p{margin:0;color:var(--hn-texto)}
.hn-faq-seccion{padding-bottom:40px}

/* ---------- Ubicación y contacto ---------- */
.hn-ubicacion-foto{position:relative;display:block;margin-top:24px;border-radius:16px;overflow:hidden;text-decoration:none}
.hn-ubicacion-foto img{width:100%;height:300px;object-fit:cover;transition:transform .6s}
.hn-ubicacion-foto:hover img{transform:scale(1.04)}
.hn-ubicacion-foto span{position:absolute;left:16px;bottom:16px;background:rgba(31,59,44,.85);color:#fff;font-size:.8rem;letter-spacing:.06em;padding:8px 14px;border-radius:999px}
.hn-contacto{background:var(--hn-crema);border-radius:18px;padding:36px;box-shadow:0 30px 60px -24px rgba(31,59,44,.35)}
.hn-contacto .h3{font-family:var(--hn-titulos);font-weight:500;font-size:2.1rem;color:var(--hn-tinta)}
.hn-contacto .h3 .bi{display:none}
.hn-contacto .form-control,.hn-contacto .form-select{border:1px solid #D9D0C2;border-radius:10px;background-color:#fff;font-family:var(--hn-cuerpo)}
.hn-contacto .form-control:focus,.hn-contacto .form-select:focus{border-color:var(--hn-verde);box-shadow:0 0 0 3px rgba(46,125,82,.15)}
.hn-contacto .btn{width:100%;border-radius:999px;background:var(--hn-verde);border-color:var(--hn-verde);color:#fff;font-family:var(--hn-cuerpo);font-weight:500;text-transform:none;letter-spacing:.02em;min-height:52px}
.hn-contacto .btn:hover{background:var(--hn-verde-hover);border-color:var(--hn-verde-hover)}

/* ---------- Pie ---------- */
.hn-footer{border-top:1px solid #CFDCCB;padding:48px 0 96px;font-size:.88rem;color:var(--hn-suave)}
.hn-footer-fila{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.hn-footer-logo{height:30px;width:auto;margin-bottom:8px}
.hn-footer p{margin:0}
.hn-footer-links{display:flex;flex-wrap:wrap;gap:18px}
.hn-footer a{color:var(--hn-texto);text-decoration:none}
.hn-footer a:hover{color:var(--hn-verde)}
.hn-redes{display:flex;gap:16px;font-size:1.4rem}

/* ---------- Aparición suave ---------- */
.hn-aparece{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.hn-aparece.hn-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hn-aparece{opacity:1;transform:none;transition:none}}

/* ---------- Tableta ---------- */
@media (max-width:991.98px){
  .hn-tarjetas{grid-template-columns:minmax(0,1fr);max-width:480px;margin:0 auto}
  .hn-dos-columnas{grid-template-columns:minmax(0,1fr);gap:44px}
  .hn-galeria{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px}
}

/* ---------- Celular ---------- */
@media (max-width:767.98px){
  .hn-seccion{padding:72px 0}
  .hn-menu-btn{display:block}
  .hn-menu{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:18px;padding:20px 24px 26px;background:rgba(31,59,44,.97)}
  .hn-menu.hn-abierto{display:flex}
  .hn-menu > a.hn-btn{justify-content:center}
  .hn-hero{padding:120px 20px 200px}
  .hn-tarjetas-seccion{margin-top:-140px}
  .hn-beneficios{grid-template-columns:minmax(0,1fr);gap:36px}
  .hn-video-como{margin-top:64px}
  .hn-frase{padding:90px 0}
  .hn-contacto{padding:26px 20px}
  .hn-footer-fila{flex-direction:column;align-items:flex-start}
}

/* ===== Ajuste 1: textos de portada legibles y estilos viejos neutralizados ===== */
.hn-hero-contenido .hn-eyebrow,.hn-hero-contenido > p{text-shadow:0 1px 14px rgba(0,0,0,.45)}
@media (min-width:768px){
  body.hn nav.hn-menu{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;border-radius:0!important}
}
@media (max-width:767.98px){
  body.hn nav.hn-menu{background:rgba(31,59,44,.97)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important}
}
body.hn .hn-contacto .btn,body.hn .hn-contacto .btn.btn-dark{background:var(--hn-verde)!important;background-image:none!important;border-color:var(--hn-verde)!important;color:#fff!important;box-shadow:none!important}
body.hn .hn-contacto .btn:hover,body.hn .hn-contacto .btn.btn-dark:hover{background:var(--hn-verde-hover)!important;border-color:var(--hn-verde-hover)!important}

/* ===== Ajuste 2: celular ===== */
body.hn .btn-whatsapp.btn-round{box-shadow:0 10px 28px -8px rgba(0,0,0,.35)!important}
@media (max-width:767.98px){
  body.hn nav.hn-menu{background:#1F3B2C!important}
  .hn-header.hn-menu-abierto{background:#1F3B2C}
  .hn-hero-contenido > p:not(.hn-micro){font-size:1rem;margin-bottom:28px}
  .hn-hero .hn-acciones{flex-direction:column;align-items:center}
  .hn-hero .hn-acciones .hn-btn{width:100%;max-width:320px}
  .hn-frase .hn-btn{padding:0 22px;font-size:.9rem}
  body.hn .btn-whatsapp.btn-round{width:54px!important;height:54px!important;min-width:0!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;border-radius:50%!important}
  body.hn .btn-whatsapp.btn-round i{font-size:1.6rem!important;margin:0!important;line-height:1}
}