/*
Theme Name: Hello Child Habita2
Template: hello-elementor
Version: 1.3.3
*/

/* =========================================================
   1) VARIABLES / BASE
========================================================= */
:root{
  --h2-orange:#F87D34;
  --h2-teal:#1EA69A;
  --h2-ink:#1b1b1b;
  --h2-mute:#6b7280;
  --h2-bg:#f8f9fb;

  --radius:16px;

  /* Ritmo vertical */
  --h2-section-gap: 26px;
  --h2-section-gap-lg: 34px;
  --h2-section-pad: clamp(44px, 6vw, 78px);
}

html,body{
  height:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
}
*,*::before,*::after{ box-sizing:inherit; }

html, body{ overflow-x:hidden; }
img, video{ max-width:100%; height:auto; display:block; }

.container{
  width:92%;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

.section{ padding:48px 0; }
.section--softbg{ background:var(--h2-bg); }

.section__title{
  font-size:28px;
  line-height:1.2;
  margin:0 0 16px;
  text-align:center;
}
.section__lead{
  max-width:760px;
  margin:.35rem auto 0;
  text-align:center;
  color:var(--h2-mute);
}

/* =========================================================
   2) LAYOUT / WRAPPER
========================================================= */
.site-wrapper{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

.site-content-wrapper,
.site-main{
  flex:1 0 auto;
  max-width:1100px;
  margin:0 auto;
  width:100%;
  padding:28px 20px;
  font-family:'Poppins',sans-serif;
}

/* =========================================================
   3) HEADER
========================================================= */
.site-header{
  background:#fff;
  padding:22px 0 16px;
  position:relative;
}

.header-container{
  width:92%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 8px;
  border-bottom:1px solid #eaeef3;
  min-height:72px;
}

.logo img{
  height:60px;
  max-height:60px;
  display:block;
}

.main-nav{
  flex:1;
  display:flex;
  justify-content:flex-end;
}

.main-menu{
  display:flex;
  gap:36px;
  list-style:none;
  margin:0;
  padding:0;
}

.site-header .main-menu>li>a{
  text-decoration:none;
  color:var(--h2-ink);
  font-weight:400;
  font-family:'Poppins',sans-serif;
  transition:.2s;
  font-size:16px;
  line-height:1;
  padding:0 6px 6px;
  display:flex;
  align-items:flex-end;
  border-radius:8px;
}
.site-header .main-menu>li>a:hover{
  color:var(--h2-teal);
  background:#f5f7f9;
}

/* Menú perfil */
.menu-perfil-desplegable{
  position:relative;
  padding-bottom:4px;
}
.menu-perfil-desplegable>.submenu-perfil{
  display:none;
  position:absolute;
  top:100%;
  right:0;
  margin-top:2px;
  background:#fff;
  border:1px solid #e5e7eb;
  list-style:none;
  padding:8px;
  z-index:10000;
  min-width:220px;
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  border-radius:12px;
}
.menu-perfil-desplegable:hover .submenu-perfil,
.menu-perfil-desplegable:focus-within .submenu-perfil{
  display:block;
}
.menu-perfil-desplegable .submenu-perfil li a{
  display:block;
  padding:10px 12px;
  color:var(--h2-ink);
  text-decoration:none;
  border-radius:8px;
}
.menu-perfil-desplegable .submenu-perfil li a:hover{
  background:#f5f7f9;
  color:var(--h2-teal);
}

/* =========================================================
   4) BOTÓN CTA (GLOBAL)
========================================================= */
.cta-boton{
  display:inline-block;
  background:var(--h2-orange);
  border:1px solid var(--h2-orange);
  color:#fff;
  font-weight:600;
  border-radius:10px;
  padding:12px 28px;
  font-size:1rem;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(248,125,52,.35);
  transition:all .25s ease;
  cursor:pointer;
}

.cta-boton:hover,
.cta-boton:focus{
  background:var(--h2-teal);
  border-color:var(--h2-teal);
  color:#fff !important;
  text-decoration:none;
  outline:none;
  box-shadow:0 8px 22px rgba(30,166,154,.45);
  transform:translateY(-2px);
}

.cta-boton:active{
  transform:scale(.97);
  box-shadow:0 4px 12px rgba(30,166,154,.3);
}

.cta-boton[disabled]{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* =========================================================
   5) HERO NUEVO (EVALUACIÓN PREVIA A LA VENTA)
========================================================= */
.h2-hero2{
  background:
    radial-gradient(900px 380px at 12% 18%, rgba(30,166,154,.10), transparent 60%),
    radial-gradient(760px 320px at 88% 22%, rgba(248,125,52,.10), transparent 55%),
    #ffffff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:18px;
  margin:16px;
  padding:clamp(34px,5vw,62px) 0;
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}
.h2-hero2__wrap{ max-width:1100px; }
.h2-hero2__grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap:clamp(18px,4vw,42px);
  align-items:center;
}

.h2-hero2__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--h2-teal);
  background:rgba(30,166,154,.10);
  border:1px solid rgba(30,166,154,.22);
  padding:8px 12px;
  border-radius:999px;
}
.h2-hero2__title{
  margin:0 0 14px;
  font-size:clamp(28px,4.6vw,44px);
  line-height:1.12;
  color:var(--h2-ink);
  font-weight:800;
  letter-spacing:-.02em;
}
.h2-hero2__title span{ color:var(--h2-orange); }
.h2-hero2__subtitle{
  margin:0 0 18px;
  color:#334155;
  font-size:clamp(15px,2.2vw,18px);
  line-height:1.65;
  max-width:60ch;
}

.h2-hero2__ctas{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:18px 0 8px;
}
.h2-hero2__link{
  color:var(--h2-teal);
  text-decoration:none;
  font-weight:700;
  border-bottom:1px solid rgba(30,166,154,.28);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.h2-hero2__link:hover{
  color:var(--h2-orange);
  border-color:rgba(248,125,52,.35);
  transform:translateY(-1px);
}

.h2-hero2__note{
  margin:10px 0 0;
  font-size:12.5px;
  color:var(--h2-mute);
  line-height:1.45;
}

/* bloque imagen derecha */
.h2-hero2__media{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
  height:100%;
  min-height:460px;
}
.h2-hero2__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* =========================================================
   6) SECCIONES HOME
========================================================= */
.h2-how{
  background:var(--h2-bg,#f7f8f9);
  padding:clamp(40px,6vw,72px) 16px;
  border-radius:18px;
  margin:12px 16px 0;
}
.h2-how__wrap{ max-width:1100px; margin:0 auto; text-align:center; }
.h2-how__title{ font-size:clamp(22px,3.6vw,32px); line-height:1.2; margin:0 0 10px; }
.h2-how__lead{ color:#5b6870; margin:0 0 28px; }
.h2-how__steps{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
  counter-reset:stepnum;
}
.h2-how__step{
  position:relative;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:18px 16px 16px;
  text-align:left;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.h2-how__step::before{
  counter-increment:stepnum;
  content:counter(stepnum);
  position:absolute;
  top:14px;
  left:14px;
  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--h2-orange);
  color:#fff;
  font-weight:700;
  box-shadow:0 6px 16px rgba(248,125,52,.25);
}
.h2-how__step h3{ margin:0 0 6px 44px; font-size:clamp(16px,2.6vw,18px); }
.h2-how__step p{ margin:0 0 2px 44px; color:#4b5563; font-size:15px; line-height:1.55; }
.h2-how__ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.h2-btn{ display:inline-block; border-radius:12px; padding:10px 16px; font-weight:600; text-decoration:none; }
.h2-btn--primary{
  background:var(--h2-orange);
  color:#fff;
  box-shadow:0 6px 16px rgba(248,125,52,.25);
  transition:transform .2s ease, box-shadow .3s ease, background .25s ease;
}
.h2-btn--primary:hover{
  background:#ff8b47;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(248,125,52,.35);
}
.h2-btn--ghost{
  background:transparent;
  color:#111827;
  border:1px solid rgba(17,24,39,.12);
}
.h2-btn--ghost:hover{ background:rgba(17,24,39,.04); }

.section--intro,
.section--how,
.section--trust,
.section--testi,
.section--faq-home,
.section--blog{
  background:var(--h2-bg,#f7f8f9);
  padding:clamp(40px,6vw,72px) 16px;
  border-radius:18px;
  margin:12px 16px 0;
}

/* Cards base */
.card{
  position:relative;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:18px 16px;
  min-height:140px;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.08); }
.card__title{ margin:0 0 6px; font-size:16px; font-weight:700; }
.card p{ margin:0; color:var(--h2-mute); font-size:14px; line-height:1.55; }

.section--intro .cards,
.cards--two{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,3vw,24px);
}

.section--how .cards{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,3vw,20px);
  position:relative;
}

.cards--rail::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:-8px;
  height:2px;
  background:linear-gradient(90deg, rgba(30,166,154,.22), rgba(248,125,52,.22));
  border-radius:2px;
  pointer-events:none;
}

.card__badge{
  position:absolute;
  inset:auto auto 100% 16px;
  transform:translateY(-10px);
  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  background:linear-gradient(135deg,var(--h2-teal),#17a193);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

/* Testimonios (si lo usas en home) */
.h2-testis{ position:relative; margin-top:18px; }
.h2-testis__viewport{
  max-width:1100px;
  width:100%;
  margin:0 auto;
  overflow:hidden;
  outline:none;
}
.h2-testis__track{
  display:flex;
  gap:18px;
  list-style:none;
  padding:0;
  margin:0;
  transition:transform .45s ease;
}
.h2-testis__slide{ flex:0 0 calc((100% - 36px) / 3); min-width:0; }

.section--testi{ background:#fff; }
.section--testi .section__title{ text-align:center; margin-bottom:clamp(22px,3.5vw,28px); }
.section--testi .card{
  background:#f8fafc;
  border-radius:16px;
  padding:24px 20px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  height:100%;
  border:1px solid rgba(15,23,42,.06);
}
.section--testi .card p:first-child{ font-style:italic; color:#333; }
.h2-testis__author{ margin-top:10px; color:#6b7280; font-size:.9rem; }

.h2-testis__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#374151;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  cursor:pointer;
  transition:all .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.h2-testis__btn:hover{
  background:var(--h2-teal);
  color:#fff;
  border-color:var(--h2-teal);
  box-shadow:0 4px 12px rgba(30,166,154,.3);
}
.h2-testis__btn.prev{ left:-48px; }
.h2-testis__btn.next{ right:-48px; }

.h2-testis__dots{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-top:16px;
}
.h2-testis__dots button{
  width:8px;
  height:8px;
  border-radius:999px;
  border:0;
  background:#d1d5db;
  transition:all .3s ease;
}
.h2-testis__dots button[aria-selected="true"]{
  background:var(--h2-teal);
  width:20px;
}

/* FAQ home */
.section--faq-home details{
  position:relative;
  overflow:hidden;
  border-radius:12px;
}
.section--faq-home details[open]::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--h2-teal);
  border-radius:12px 0 0 12px;
}
.section--faq-home details[open]:hover::before{ background:var(--h2-orange); }

.section--faq-home details > summary{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  list-style:none;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.section--faq-home details > summary:hover{ background:#f5f7f9; }
.section--faq-home details[open] > summary{
  border-color:#cbe9e6;
  box-shadow:inset 0 0 0 2px rgba(30,166,154,.12);
}

/* Blog */
.section--blog{ background:var(--h2-bg,#f7f8f9); }
.section--blog .section__title{ text-align:center; margin-bottom:36px; }

.section--blog .posts-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.post-card{
  background:#fff;
  border-radius:var(--radius,16px);
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  border:1px solid rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.post-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.post-card__thumb img,
.post-card__placeholder{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#f3f3f3;
}

.post-card__body{ padding:18px; }

.post-card__title{
  margin:0 0 8px;
  font-size:1.05rem;
  line-height:1.3;
  font-weight:600;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-card__title a{
  color:var(--h2-orange);
  text-decoration:none;
  transition:color .2s;
}
.post-card__title a:hover{ color:var(--h2-teal); }

.post-card__meta{ font-size:.85rem; color:var(--h2-mute); margin:0 0 8px; }

.post-card__excerpt{
  font-size:.95rem;
  color:#444;
  margin:0 0 12px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.post-card__more{
  display:inline-block;
  margin-top:auto;
  color:var(--h2-teal);
  font-weight:600;
  text-decoration:none;
  transition:color .2s;
}
.post-card__more:hover{
  text-decoration:underline;
  color:var(--h2-orange);
}

.section--blog .section__cta{ margin-top:40px; text-align:center; }
.section--blog .section__cta a{ color:var(--h2-teal); font-weight:600; text-decoration:none; }
.section--blog .section__cta a:hover{ text-decoration:underline; color:var(--h2-orange); }

/* =========================================================
   7) FORMULARIO VALORACIÓN (ajustes mínimos)
========================================================= */
#h2-lead-form .h2-step[data-step="1"] .grid-2{ align-items:start !important; }

#h2-lead-form .grid-3,
#h2-lead-form .grid-2{ align-items:flex-start !important; }

#h2-price-block{ align-items:flex-start !important; }

#h2-price-help{
  display:block;
  min-height:34px;
}

#h2-lead-form .h2-help{
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.3;
  color:var(--h2-mute);
}

#h2-lead-form .h2-nav .h2-prev{
  background:#f5f7f9;
  border:1px solid #e5e7eb;
  color:#111;
  border-radius:10px;
  padding:10px 16px;
  font-weight:500;
  cursor:pointer;
  transition:all .2s ease;
}
#h2-lead-form .h2-nav .h2-prev:hover{ background:#eef1f3; }

/* =========================================================
   8) SINGLE POST
========================================================= */
body.single-post .site-main{
  max-width:860px;
  margin:0 auto;
  padding:40px 20px;
  font-family:'Poppins',sans-serif;
  line-height:1.7;
  color:var(--h2-ink);
}
body.single-post .entry-content{ font-size:1rem; line-height:1.8; }
body.single-post .entry-content a{
  color:var(--h2-orange);
  text-decoration:underline;
  font-weight:600;
}
body.single-post .entry-content a:hover{ color:var(--h2-teal); }
body.single-post .entry-meta a{
  color:var(--h2-orange);
  text-decoration:none;
  font-weight:600;
}
body.single-post .entry-meta a:hover{
  color:var(--h2-teal);
  text-decoration:underline;
}
body.single-post h1.entry-title{
  font-size:clamp(26px,3.2vw,34px);
  line-height:1.25;
  margin:0 0 16px;
  color:var(--h2-ink);
  font-weight:800;
}
body.single-post .entry-content h2,
body.single-post .entry-content h3{
  color:var(--h2-orange);
  margin:28px 0 12px;
  line-height:1.3;
}
body.single-post .entry-content h3{ font-size:1.1rem; }
body.single-post .entry-content ul,
body.single-post .entry-content ol{
  padding-left:1.25rem;
  margin:0 0 1rem;
}
body.single-post .post-thumbnail{
  padding-bottom:20px;
  border-bottom:1px solid #e5e7eb;
  margin-bottom:30px;
}
body.single-post .post-thumbnail img,
body.single-post .entry-content>figure.wp-block-image img{
  width:100%;
  height:auto;
  border-radius:12px;
  margin:18px 0 28px;
  display:block;
}
body.single-post .cta-final{
  text-align:center;
  margin-top:36px;
}
body.single-post .cta-final a{
  display:inline-block;
  background:var(--h2-orange);
  color:#fff;
  padding:12px 22px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  transition:background .2s;
}
body.single-post .cta-final a:hover{ background:var(--h2-teal); }

/* =========================================================
   9) FOOTER
========================================================= */
footer{
  margin-top:auto;
  background:var(--h2-teal);
  color:#fff;
  padding:30px 20px;
  font-family:'Poppins',sans-serif;
  text-align:center;
}
footer .footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}
footer .footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
footer .footer-links a{
  color:#fff;
  text-decoration:none;
  position:relative;
  transition:color .25s ease;
}
footer .footer-links a::before{
  content:"|";
  opacity:.5;
  margin-right:8px;
}
footer .footer-links a:first-child::before{ content:""; margin:0; }

footer .footer-contact{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
}
footer .footer-contact a{
  color:#fff;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  position:relative;
  transition:color .25s ease;
}
footer .footer-sep{
  opacity:.5;
  pointer-events:none;
  font-weight:300;
  margin:0 6px;
}

footer a svg{
  width:18px;
  height:18px;
  stroke:#fff;
  stroke-width:1.8;
  fill:none;
  vertical-align:middle;
  transition:transform .25s ease, stroke .25s ease;
}
footer a:hover svg{ transform:translateY(-2px); stroke:#fff; }

footer a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:1px;
  background:rgba(255,255,255,.8);
  transition:width .25s ease;
}
footer a:hover::after{ width:100%; }

footer .footer-rights{ font-size:14px; opacity:.9; }

footer .footer-payments{
  margin-top:4px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:rgba(255,255,255,.75);
}
footer .footer-payments img{
  height:14px;
  width:auto;
  display:block;
}

/* =========================================================
   10) ACCESIBILIDAD / PREFERENCIAS
========================================================= */
@media (prefers-reduced-motion:reduce){
  .cta-boton,.card,.post-card{ transition:none!important; }
}

/* =========================================================
   11) CTA INTERMEDIO (entre FAQ y Blog)
========================================================= */
.h2-cta-mid{ margin: var(--h2-section-gap) 16px 0; }
.h2-cta-mid .container{ max-width:1100px; }

.h2-cta-mid__box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px 22px;
  border-radius:18px;
  background:
    radial-gradient(720px 240px at 10% 30%, rgba(30,166,154,.10), transparent 60%),
    radial-gradient(720px 240px at 90% 30%, rgba(248,125,52,.10), transparent 60%),
    #ffffff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}
.h2-cta-mid__copy{ min-width:0; max-width:680px; }
.h2-cta-mid__title{
  margin:0 0 6px;
  font-size:clamp(18px, 2.2vw, 22px);
  line-height:1.25;
  font-weight:800;
  color:var(--h2-ink);
  letter-spacing:-.01em;
}
.h2-cta-mid__lead{
  margin:0;
  color:#475569;
  font-size:15px;
  line-height:1.6;
}
.h2-cta-mid__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  flex:0 0 auto;
}
.h2-cta-mid__actions .cta-boton{
  white-space:nowrap;
  padding:12px 22px;
  border-radius:12px;
}
.h2-cta-mid__note{
  font-size:12px;
  color:var(--h2-mute);
  text-align:right;
}

@media (min-width: 980px){
  .h2-cta-mid{ margin: var(--h2-section-gap-lg) 16px 0; }
  .h2-cta-mid__box{ padding:24px 26px; }
}

/* =========================================================
   12) RITMO VERTICAL (ESPACIO ENTRE SECCIONES)
========================================================= */
.h2-hero2,
.h2-how,
.section--intro,
.section--testi,
.section--faq-home,
.section--blog{
  margin: var(--h2-section-gap) 16px 0 !important;
}

@media (min-width: 980px){
  .h2-hero2,
  .h2-how,
  .section--intro,
  .section--testi,
  .section--faq-home,
  .section--blog{
    margin: var(--h2-section-gap-lg) 16px 0 !important;
  }
}

.h2-how,
.section--intro,
.section--testi,
.section--faq-home,
.section--blog{
  padding: var(--h2-section-pad) 16px;
}

/* anchors */
#como-decidimos,
#faq-title,
#blog-title{
  scroll-margin-top: 110px;
}

/* =========================================================
   13) RESPONSIVE
========================================================= */
@media (min-width: 900px){
  .h2-how__steps{ grid-template-columns:repeat(3, 1fr); gap:20px; }
  .h2-how__step{ padding:20px 18px 18px; }
}

@media (max-width: 992px){
  /* Hero imagen un poco menos alta en tablet */
  .h2-hero2__media{ min-height:420px; }
}

@media (max-width: 900px){
  .h2-hero2__grid{ grid-template-columns:1fr; }
  .h2-hero2__media{ order:2; min-height:340px; height:auto; aspect-ratio: 4 / 3; }
  .h2-hero2__media img{ height:100%; }

  .section--blog .posts-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 768px){
  .header-container{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:12px 0;
    background:#fff;
    min-height:auto;
  }
  .logo{ width:100%; text-align:center; margin-bottom:10px; }
  .logo img{ height:48px; max-height:48px; margin:0 auto; }

  .main-nav{ width:100%; display:flex; justify-content:center; }
  .main-menu{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:0;
    padding:0;
    width:100%;
  }
  .main-menu li{ width:100%; text-align:center; }
  .main-menu a{
    display:inline-block;
    width:100%;
    text-align:center;
    font-size:16px;
    color:#333;
    text-decoration:none;
    font-weight:500;
  }
  .main-menu a:hover{ color:var(--h2-teal); }

  /* CTA mid apilado */
  .h2-cta-mid__box{
    flex-direction:column;
    align-items:flex-start;
    padding:20px 18px;
  }
  .h2-cta-mid__actions{ width:100%; align-items:stretch; }
  .h2-cta-mid__actions .cta-boton{ width:100%; text-align:center; }
  .h2-cta-mid__note{ text-align:center; }

  footer .footer-inner>div{
    flex:1 1 100%!important;
    text-align:center!important;
    margin-bottom:10px;
  }
}

@media (max-width: 700px){
  .cards--two{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .h2-testis__viewport{ padding:0 12px; }
  .h2-testis__slide{ flex:0 0 88%; min-width:0; }
  .h2-testis__btn{ width:40px; height:40px; }
  .h2-testis__btn.prev{ left:8px; }
  .h2-testis__btn.next{ right:8px; }
  .section--testi .card{ padding:18px 16px; }

  footer .footer-links a::before{ content:""; }

  .h2-hero2__media{ aspect-ratio: 16 / 10; }
}

@media (max-width: 600px){
  .section--intro{ padding:36px 16px; }
  .section--intro .cards{ grid-template-columns:1fr; gap:18px; }

  .section--how{ padding:36px 16px; }
  .section--how .cards{ grid-template-columns:1fr; gap:16px; }
  .cards--rail::before{ left:12px; right:12px; top:-12px; }
  .section--how .card__badge{ top:12px; left:12px; transform:none; width:28px; height:28px; }

  .section--blog .posts-grid{ grid-template-columns:1fr; }
  .post-card__body{ padding:16px; }
  .post-card__excerpt{ -webkit-line-clamp:2; }

  .h2-hero2{ padding:38px 0; }
  .h2-hero2__ctas{ gap:10px; }

  .h2-hero2__media{
    min-height:0;
    aspect-ratio: 16 / 9;
    border-radius:16px;
  }
}

/* =========================================================
   HOTFIX: overrides a estilos inline de front-page.php
   (VENTAJAS + FAQ)
========================================================= */

/* VENTAJAS: el inline fija 2 columnas y rompe móvil */
.section--intro .cards{
  margin-top:22px !important;
  display:grid !important;
  grid-template-columns:repeat(2, 1fr) !important;
  gap:24px !important;
}

/* En móvil: 1 columna sí o sí */
@media (max-width: 600px){
  .section--intro .cards{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
}

/* FAQ: quita necesidad de inline (si se quedan, no pasa nada) */
.section--faq-home details{
  border:1px solid #eef1f3;
  border-radius:12px;
  padding:12px 16px;
  margin-bottom:10px;
  background:#fff;
}
.section--faq-home summary{
  cursor:pointer;
  font-weight:600;
}
.section--faq-home details > div{
  margin-top:10px;
  color:#444;
}

/* =========================================================
   FIX 1: HERO imagen (en móvil NO recortar, mostrar entera)
========================================================= */
@media (max-width: 900px){
  .h2-hero2__media{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
  }
  .h2-hero2__media img{
    height:auto !important;
    width:100% !important;
    object-fit:contain !important;   /* ✅ muestra la imagen completa */
    background:#fff;
  }
}

/* =========================================================
   FIX 2: Carrusel testimonios (móvil + tablet)
   - móvil: 1 tarjeta a ancho completo, sin flechas encima
   - tablet: 2 tarjetas (y el JS debe acompañar)
========================================================= */

/* Tablet: 2 columnas reales */
@media (max-width: 900px){
  .h2-testis__slide{
    flex:0 0 calc((100% - 18px) / 2);
  }
  .h2-testis__btn.prev{ left:-16px; }
  .h2-testis__btn.next{ right:-16px; }
}

/* Móvil: 1 columna, tarjeta centrada, sin flechas */
@media (max-width: 640px){
  .h2-testis__viewport{ padding:0 16px; }
  .h2-testis__track{ gap:12px !important; }
  .h2-testis__slide{ flex:0 0 100% !important; }
  .h2-testis__btn{ display:none !important; } /* ✅ evita que “pisen” la tarjeta */
  .section--testi .card{ padding:22px 18px; }
}