/* ==========================================================================
   Consentium — réplica estática (HTML/CSS/JS)
   Tokens extraídos del kit de Elementor original de consentium.cl
   ========================================================================== */

/* ---------- Fuentes self-hosted ---------- */
@font-face{font-family:'Cabinet Grotesk';src:url('../assets/fonts/CabinetGrotesk-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../assets/fonts/CabinetGrotesk-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../assets/fonts/CabinetGrotesk-Bold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../assets/fonts/CabinetGrotesk-Extrabold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../assets/fonts/CabinetGrotesk-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter_24pt-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter_24pt-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter_24pt-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --red:#FB0201;
  --orange:#FE9D01;
  --grad:linear-gradient(145deg,#FB0201 0%,#FE9D01 100%);
  --ink:#101828;
  --slate:#364153;
  --gray:#4A5565;
  --muted:#99A1AF;
  --bg-soft:#F9FAFB;
  --white:#fff;
  --red-50:#FEF2F2;
  --red-100:#FFE2E2;
  --red-200:#FEDADA;
  --line:#E5E7EB;
  --green:#00C950;
  --maxw:1280px;
  --header-h:72px;
  --radius:10px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Cabinet Grotesk','Inter',sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--slate);background:var(--white);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.container{width:100%;max-width:var(--maxw);margin:0 auto}
.section{padding:64px 16px}
.section > .container{display:flex;flex-direction:column;align-items:center;gap:24px}
.section--t80{padding:80px 16px 0}
.section--t80b64{padding:80px 16px 64px}
.section--gap64 > .container{gap:64px}
.section--gap48 > .container{gap:48px}
.section--gap16 > .container{gap:16px}
.section--soft{background:var(--bg-soft)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Tipografía ---------- */
.h1{font-family:var(--display);font-weight:700;font-size:3.75rem;line-height:1;color:var(--white);text-align:center}
.h2{font-family:var(--display);font-weight:600;font-size:2.25rem;line-height:1;color:#333;text-align:center}
.h2--onGrad{font-size:2rem;line-height:1;color:var(--white)}
.w60{width:60%}
.w70{width:70%}
.w80{width:80%}
.w98{width:98%}
.lead{font-family:var(--sans);font-size:1.25rem;line-height:30px;color:var(--gray);text-align:center;margin-bottom:14.4px}
.lead-group{display:flex;flex-direction:column;align-items:center}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);line-height:1;border-radius:8px;border:0;text-align:center;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.btn--hero{font-size:1.125rem;font-weight:500;padding:11.7px 18px}
.btn--white{background:var(--white);color:var(--red)}
.btn--white:hover,.btn--white:focus{background:#000;color:var(--white)}
.btn--ghost{background:transparent;color:var(--white);border:1px solid var(--white);padding:10.7px 17px}
.btn--ghost:hover,.btn--ghost:focus{color:#000;border-color:#000}
.btn--red{background:var(--red);color:var(--white);font-size:.875rem;font-weight:500;padding:12.25px 14px}
.btn--red:hover,.btn--red:focus{background:#000;color:var(--white)}
.btn--redSm{background:var(--red);color:var(--white);font-size:.875rem;font-weight:600;padding:11.9px 14px}
.btn--redSm:hover,.btn--redSm:focus{background:#000;color:var(--white)}
.btn--onGrad{background:var(--white);color:var(--red);font-size:.875rem;font-weight:600;padding:11.9px 14px}
.btn--onGrad:hover,.btn--onGrad:focus{background:#000;color:var(--white)}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:100;background:var(--white)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 16px}
.site-header__logo img{width:248px;height:40px}
.nav{display:flex;align-items:center}
.nav a{display:flex;align-items:center;font-size:1rem;font-weight:600;line-height:20px;color:var(--slate);padding:0 32px;transition:color .2s ease}
.nav a:hover,.nav a.is-active{color:var(--red)}
.site-header__cta{flex:none}
.burger{display:none;background:none;border:0;padding:8px;color:var(--ink)}
.burger svg{width:24px;height:24px;fill:currentColor}

/* Menú off-canvas (móvil) */
.offcanvas{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none}
.offcanvas__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s ease}
.offcanvas__panel{position:absolute;top:0;right:0;height:100%;width:min(360px,86vw);background:var(--white);transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;padding:16px}
.offcanvas.is-open{visibility:visible;pointer-events:auto}
.offcanvas.is-open .offcanvas__backdrop{opacity:1}
.offcanvas.is-open .offcanvas__panel{transform:translateX(0)}
.offcanvas__head{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.offcanvas__head img{width:200px;height:auto}
.offcanvas__close{background:none;border:0;padding:8px;color:var(--ink)}
.offcanvas__close svg{width:24px;height:24px;fill:currentColor}
.offcanvas nav{display:flex;flex-direction:column;margin-top:16px}
.offcanvas nav a{font-size:1rem;font-weight:600;color:#33373D;padding:10px 20px}
.offcanvas nav a:hover{color:var(--red)}
.offcanvas .btn{margin:16px 20px 0}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{background-image:var(--grad)}
.hero__bg{background-image:url('../assets/img/Hero-Background.png');background-position:center center;background-repeat:no-repeat;background-size:cover}
.hero__inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:64px;min-height:600px;padding:16px 0}
.hero__badge{display:flex;align-items:flex-start;justify-content:center;gap:14px;width:768px;max-width:100%;background:rgba(255,255,255,.8);box-shadow:0 0 4px rgba(0,0,0,.1);border-radius:8px;padding:12px 12px 8px}
.hero__badge span{display:block;width:19px;height:19px;line-height:0;flex:none}
.hero__badge svg{width:17px;height:16px;margin:auto}
.hero__badge p{font-family:var(--sans);font-size:.875rem;font-weight:700;line-height:21px;margin-bottom:7px;color:var(--slate)}
.hero__badge strong{color:var(--red);font-weight:700}
.hero__body{display:flex;flex-direction:column;align-items:center;gap:32px;width:768px;max-width:100%}
.hero__lead{font-size:1.125rem;line-height:30px;color:var(--white);text-align:center}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;width:100%}

/* ==========================================================================
   Tarjetas genéricas
   ========================================================================== */
.card{display:flex;flex-direction:column;gap:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card__box{display:flex;flex-direction:column;gap:16px}
.card__title{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:24px;color:var(--ink);margin:8px 0 20px}
.card__desc{font-family:var(--sans);font-size:1rem;line-height:24px;color:var(--slate)}
.card--tight .card__title{margin-bottom:10px}
.card--row .card__box{flex-direction:row;align-items:flex-start}
.card--row .card__content{flex:1}
.icon-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--red-200);border-radius:var(--radius);width:48px;height:48px;padding:12px;flex:none}
.icon-badge svg{width:24px;height:24px}

/* ---------- Sección: ¿Estás preparado? ---------- */
.risks{display:flex;flex-direction:row;justify-content:space-between;gap:0 32px;padding-top:32px;width:100%}
.risk{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;background:var(--red-50);border:1px solid var(--red-100);border-radius:var(--radius);padding:16px}
.risk__content{width:100%}
.risk__icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;padding:16px;border-radius:100px;background:var(--red-200);flex:none}
.risk__icon svg{width:32px;height:32px}
.risk h3{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:24px;color:var(--ink);margin:8px 0 20px}
.risk p{font-family:var(--sans);font-size:1rem;line-height:24px;color:var(--slate)}

/* ---------- Sección: plataforma (panel degradado) ---------- */
.panel{display:flex;flex-direction:row;align-items:center;gap:26px;min-height:460px;background-image:var(--grad);border-radius:var(--radius);padding:32px;width:100%}
.panel__col{display:flex;flex-direction:column;align-items:flex-start;gap:26px;flex:0 0 43.5%}
.panel__col p{color:var(--white);font-size:1rem;line-height:1.5}
.panel__media{flex:1;display:flex;justify-content:flex-end;align-items:flex-end}
.panel__media img{width:457px;height:auto}

/* ---------- Sección: solución (2 tarjetas con listas) ---------- */
.grid-2{display:flex;flex-direction:row;justify-content:space-between;gap:0 32px;padding-top:32px;width:100%}
.grid-2 > *{flex:1}
.feature-list{display:flex;flex-direction:column;padding-bottom:6px}
.feature-list li{display:flex;align-items:center;gap:5px;padding-bottom:6px}
.feature-list li svg{width:6px;height:6px;flex:none}
.feature-list span{font-family:var(--sans);font-size:.875rem;line-height:21px;color:var(--slate)}

/* ---------- Sección: derechos B+ARCO+P ---------- */
.grid-3{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between;gap:32px;padding-top:32px;width:100%}
.grid-3 > *{flex:0 0 30%}

/* ---------- Sección: RAT ---------- */
.grid-4{display:flex;flex-direction:row;justify-content:space-between;gap:0 16px;padding-top:32px;width:100%}
.grid-4 > *{flex:1}
.card--plain{border:0;align-items:center;text-align:center;background:var(--white)}
.card--plain .card__box{align-items:center;gap:22px}
.card--plain{min-height:243px}
.card--plain .card__desc{font-size:.875rem;line-height:21px}
.rat-icon{display:inline-flex;align-items:center;justify-content:center;width:71px;height:71px;padding:20px;border-radius:50%;background:var(--red-50);flex:none}
.rat-icon svg{width:28px;height:28px}

/* ---------- Banda CTA degradada ---------- */
.cta-band{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:56px;min-height:300px;background-image:var(--grad);border-radius:var(--radius);padding:32px;width:100%}
.cta-band p{color:var(--white);font-size:1.125rem;line-height:1.5;text-align:center;width:40%}

/* ---------- Sección: beneficios ---------- */
.grid-5{display:flex;flex-direction:row;justify-content:space-between;gap:16px;padding:32px 0;width:100%}
.grid-5 > *{flex:0 0 18%}
.section-actions{display:flex;justify-content:center;padding-top:32px}

/* ---------- Sección: respaldo ---------- */
.quote-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:58px;min-height:225px;background-image:var(--grad);border-radius:var(--radius);padding:32px;width:100%}
.quote-box h3{font-family:var(--display);font-weight:600;font-size:2rem;line-height:1;color:var(--white);text-align:center;width:70%}
.quote-box p{color:var(--white);font-size:1.125rem;line-height:1.5;text-align:center;width:60%}
.backing{display:flex;flex-direction:row;align-items:center;gap:48px;width:100%}
.backing .certs{display:none}
.backing__slide{display:flex;flex-direction:column;gap:16px}
.backing__cards{display:flex;flex-direction:column;gap:16px;flex:1;padding-bottom:16px}
.backing .card{flex-direction:row;align-items:center;gap:16px}
.backing .icon-badge{width:50px;height:50px;padding:15px}
.backing .icon-badge svg{width:20px;height:20px}
.certs{display:flex;flex-direction:column;gap:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px;flex:1}
.certs__head{display:flex;align-items:center;gap:12px}
.certs__title{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.2;color:var(--ink)}
.certs__grid{display:flex;flex-wrap:wrap;gap:16px}
.cert{display:flex;align-items:center;gap:12px;background:var(--bg-soft);border-radius:var(--radius);padding:12px;flex:1 1 calc(50% - 8px)}
.cert svg{width:20px;height:21px;flex:none}
.cert h4{font-family:var(--sans);font-size:1rem;font-weight:500;color:#333}

/* ==========================================================================
   Formulario de contacto (estilos del sitio original)
   ========================================================================== */
.contenedor-formulario-demo{max-width:672px;margin:0 auto;font-family:var(--sans);text-align:center}
.contenedor-formulario-demo h2{font-family:var(--display);font-size:2.25rem;line-height:1.2;font-weight:600;margin:8px 0 10px;color:#333}
.contenedor-formulario-demo .subtitulo{font-family:var(--sans);font-size:1.25rem;line-height:30px;color:#555;margin-bottom:50px}
.fila-formulario{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:24px;text-align:left}
.columna-formulario{flex:1;min-width:200px}
.columna-formulario.full-width{flex-basis:100%}
.contenedor-formulario-demo label{font-family:var(--sans);font-size:.875rem;line-height:21px;font-weight:600;color:#333;display:block;margin-bottom:8px}
.contenedor-formulario-demo .form-control{font-family:var(--sans);font-size:.875rem;line-height:21px;width:100%;padding:10.5px;margin-bottom:7px;border:1px solid #F3F3F5;border-radius:8px;box-sizing:border-box;color:var(--gray);background:#fff}
.contenedor-formulario-demo .form-control:focus{outline:none;border-color:var(--red)}
.contenedor-formulario-demo textarea{height:100px;padding:12px;margin-bottom:14px;resize:vertical}
.fila-checkbox{margin-bottom:24px;min-height:144px}
.fila-checkbox .columna-formulario{display:flex;flex-direction:column;justify-content:center;gap:20px}
.checkbox-wrapper{display:block;margin-bottom:10px}
.checkbox-wrapper label{display:flex;align-items:flex-start;font-size:.9rem;font-weight:400;color:var(--gray);line-height:1.4em;margin-bottom:0}
.fila-checkbox input[type="checkbox"]{margin-right:10px;margin-top:3px;flex:none;accent-color:var(--red)}
.fila-checkbox a{color:#ff0000;text-decoration:underline}
.fila-formulario.centrado{justify-content:center;margin-bottom:-4px;margin-top:32px;padding-bottom:45px}
.boton-rojo{font-family:var(--sans);font-size:1rem;line-height:26px;background-color:#ff0000;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-weight:bold;max-width:300px;transition:background-color .3s ease}
.boton-rojo:hover{background-color:#000;color:#fff}
.nota-final{font-family:var(--sans);font-size:.875rem;line-height:21px;text-align:center;color:#777;margin:-14px 0 14.4px}
.captcha-slot{height:72px}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-response{border-radius:10px;padding:12px;text-align:center;margin-top:16px;font-size:.875rem;border:1px solid transparent}
.form-response[hidden]{display:none}
.form-response.is-invalid{border-color:#FE9C01;background-color:#FAE2BC;color:#7a4d00}
.form-response.is-sent{border-color:#00C950;background-color:#D9F7E5;color:#065f2b}
.form-response.is-failed{border-color:#FB0201;background-color:#FFE6E6;color:#8a0000}
.field-error{display:block;margin-top:6px;font-size:.8125rem;color:var(--red)}
.form-control.has-error{border-color:var(--red)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:#000;padding:0 16px}
.site-footer__inner{display:flex;gap:26px;padding:48px 0}
.site-footer__brand{display:flex;flex-direction:column;gap:26px;flex:0 0 256px}
.site-footer__brand img{width:248px;height:40px}
.site-footer__brand p{font-size:.875rem;line-height:21px;margin-bottom:14.4px;color:var(--muted)}
.site-footer__cols{display:flex;gap:32px;flex:0 1 832px;padding:0 0 8px 64px}
.site-footer__col{flex:1}
.site-footer h2{font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1;color:var(--white);margin-bottom:24px}
.site-footer a{display:inline-block;font-size:1rem;line-height:20px;color:var(--muted);transition:color .2s ease}
.site-footer a:hover{color:var(--white)}
.site-footer li{line-height:20px;margin-bottom:14px}
.site-footer li:last-child{margin-bottom:0}

/* ==========================================================================
   Carrusel (versión móvil de las grillas)
   ========================================================================== */
.carousel{display:none}
.carousel__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:32px 0 8px;scrollbar-width:none}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track > *{scroll-snap-align:center;flex:0 0 min(88%,420px)}
.carousel__dots{display:flex;justify-content:center;gap:8px;padding-top:8px}
.carousel__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#D1D5DC;transition:background-color .2s ease,width .2s ease}
.carousel__dots button.is-active{background:var(--red);width:20px;border-radius:4px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1200px){
  .nav a{padding:0 18px}
  .site-header__logo img{width:200px;height:32px}
}
@media (max-width:1024px){
  :root{--maxw:1024px}
  .w60,.w70,.w80,.w98{width:90%}
  .cta-band p,.quote-box p{width:80%}
  .hero__badge,.hero__body{width:100%}
  .nav,.site-header__cta{display:none}
  .burger{display:block}
  .panel{flex-direction:column;align-items:stretch}
  .panel__media{justify-content:center}
  .panel__media img{width:100%;max-width:520px}
  .backing{flex-direction:column;align-items:stretch}
  .grid-5{flex-wrap:wrap}
  .grid-5 > *{flex:1 1 calc(33.333% - 11px)}
  .grid-4{flex-wrap:wrap}
  .grid-4 > *{flex:1 1 calc(50% - 8px)}
}
@media (max-width:767px){
  :root{--maxw:767px}
  .section{padding:48px 16px}
  .h1{font-size:2.5rem}
  .h2{font-size:1.75rem}
  .h2--onGrad{font-size:1.5rem}
  .w60,.w70,.w80,.w98{width:100%}
  .cta-band p,.quote-box p{width:100%}
  .lead{font-size:1rem;line-height:24px}
  .hero__lead{font-size:1rem}
  .hero__inner{min-height:520px}
  .hero__actions{width:100%;flex-direction:column}
  .hero__actions .btn{width:100%;font-size:1rem}
  .panel__col{align-items:center;text-align:center}
  .panel__col .h2--onGrad{text-align:center}
  .panel__col p{text-align:center}
  /* las grillas se convierten en carrusel */
  .grid-2,.grid-3,.grid-4,.grid-5,.risks,.backing__cards{display:none}
  .backing .certs{display:flex}
  .panel,.card--plain,.quote-box{min-height:0}
  .carousel{display:block}
  .site-footer__inner{flex-direction:column;gap:32px}
  .site-footer__cols{flex-direction:column;gap:32px;flex:1;padding:0}
  .fila-checkbox{min-height:0}
  .certs__grid .cert{flex:1 1 100%}
  .fila-formulario{gap:0}
  .columna-formulario{flex-basis:100%;margin-bottom:1.5em}
}