/* Ofertitas · LEADS · ofe-leads.css (fuente: studio/lib/leads-assets/src; Estrella publica assets/ofe-leads.{hash}.css al compilar) */
.ofe-leads{--ofe-bg:#111827;--ofe-fg:#fff;--ofe-muted:#D1D5DB;--ofe-accent:#E11D48;--ofe-radius:16px;--ofe-pad:22px;--ofe-gap:14px;--ofe-bs:none;--ofe-bw:0;--ofe-bc:transparent;--ofe-ts:22px;--ofe-xs:14.5px;--ofe-bts:14px;--ofe-br:10px;--ofe-ir:10px;--ofe-bfg:#fff;--ofe-ov:.45;box-sizing:border-box;min-height:214px;margin:22px 0;padding:var(--ofe-pad);border:var(--ofe-bw) var(--ofe-bs) var(--ofe-bc);border-radius:var(--ofe-radius);background:var(--ofe-bg);color:var(--ofe-fg);font:inherit;line-height:1.35;position:relative;overflow:hidden}
.ofe-leads[hidden]{display:none}
.ofe-leads *{box-sizing:border-box}
.ofe-leads__form{margin:0}
.ofe-leads__title{margin:0 0 calc(var(--ofe-gap) * .45);font-size:var(--ofe-ts);line-height:1.15;font-weight:900;color:var(--ofe-fg)}
.ofe-leads__subtitle{margin:0 0 calc(var(--ofe-gap) * .6);font-size:15px;font-weight:700;color:var(--ofe-fg)}
.ofe-leads__text{margin:0 0 var(--ofe-gap);font-size:var(--ofe-xs);color:var(--ofe-muted)}
.ofe-leads__row{display:flex;gap:8px;flex-wrap:wrap}
.ofe-leads__label{position:absolute;left:-9999px}
.ofe-leads__input{flex:1 1 200px;min-width:0;height:46px;min-height:46px;border-radius:var(--ofe-ir);border:1px solid #4B5563;padding:0 14px;font-size:15px;background:#fff;color:#111;font-family:inherit}
.ofe-leads__input--name{flex:0 1 150px}
.ofe-leads__input:focus{outline:2px solid var(--ofe-accent);outline-offset:1px}
.ofe-leads__btn{height:46px;padding:0 18px;border:0;border-radius:var(--ofe-br);background:var(--ofe-accent);color:var(--ofe-bfg);font-weight:900;font-size:var(--ofe-bts);letter-spacing:.02em;cursor:pointer;font-family:inherit;white-space:nowrap}
.ofe-leads__btn:disabled{opacity:.6;cursor:wait}
.ofe-leads__consent{display:flex;gap:8px;align-items:flex-start;margin:calc(var(--ofe-gap) * .85) 0 0;font-size:13px;color:var(--ofe-fg);cursor:pointer}
.ofe-leads__consent input{margin:3px 0 0;flex:none}.ofe-leads__consent a{color:var(--ofe-fg);text-decoration:underline}
.ofe-leads__legal{margin:calc(var(--ofe-gap) * .45) 0 0;font-size:11.5px;color:var(--ofe-muted)}
.ofe-leads__msg{margin:8px 0 0;font-size:13px;min-height:1em}
.ofe-leads__msg:empty{display:none}
.ofe-leads__msg.is-err{color:#FCA5A5}.ofe-leads--card .ofe-leads__msg.is-err{color:#B91C1C}
.ofe-leads__msg.is-sug{color:#FDE68A}.ofe-leads--card .ofe-leads__msg.is-sug{color:#92400E}
.ofe-leads__msg button{margin-left:6px;background:#fff;border:0;border-radius:8px;padding:4px 10px;font-weight:800;color:#111;cursor:pointer;font:inherit;font-size:12.5px}
.ofe-leads__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ofe-leads.is-done .ofe-leads__row,.ofe-leads.is-done .ofe-leads__consent,.ofe-leads.is-done .ofe-leads__legal,.ofe-leads.is-done .ofe-leads__text{display:none}
.ofe-leads__thanks{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46;border-radius:10px;padding:12px 14px;font-weight:700;font-size:14px;margin:8px 0 0}
/* 4-10-2026 · el «gracias» con los pasos (antes era una frase): título, quién manda el correo, tres pasos y la nota del spam */
.ofe-leads__thanks{font-weight:500;font-size:14.5px;line-height:1.45;text-align:left;padding:14px 16px}
.ofe-leads__thanks p{margin:0 0 6px}.ofe-leads__thanks-t{font-weight:800;font-size:16px}
.ofe-leads__thanks-pasos{margin:4px 0 8px;padding-left:22px}.ofe-leads__thanks-pasos li{margin:2px 0}
.ofe-leads__thanks-nota{font-size:13px;opacity:.85;margin:0!important}
.ofe-leads.is-done .ofe-leads__subtitle{align-self:flex-start}   /* con el «gracias» el cuerpo pasa a columna flexible y el cartel se estiraba a todo el ancho */
/* cinturón y tirantes: si algún día vuelve a caer en una rejilla, que ocupe la fila entera
   en vez de abrirse una columna propia y estrujar al resto. 2026-09-12. */
.ofe-leads__thanks{flex:0 0 auto;width:100%;box-sizing:border-box;min-width:0}
/* Al terminar solo quedan el titular y el «gracias». En las tarjetas con imagen el cuerpo
   mide lo que mide la foto, así que sin esto el aviso se queda pegado arriba y deja un
   palmo de hueco vacío al lado del cerdito. 2026-09-12. */
.ofe-leads.is-done .ofe-leads__body{display:flex;flex-direction:column;justify-content:center}
.ofe-leads.is-done .ofe-leads__body > *{flex:0 0 auto}   /* en la cinta el titular llevaba flex-basis 180px: en columna eso son 180px de ALTO */
@media (max-width:600px){.ofe-leads__row{flex-direction:column}.ofe-leads__input,.ofe-leads__input--name{flex:none}.ofe-leads__btn{width:100%}.ofe-leads__title{font-size:20px}}
/* card (landing / shortcode) */
.ofe-leads--inline-card{--ofe-gap:24px}   /* dentro del artículo: más aire por defecto (el editor lo puede cambiar) */
.ofe-leads--card{--ofe-bg:#fff;--ofe-fg:#111827;--ofe-muted:#4B5563;--ofe-accent:#16A34A;--ofe-bs:dashed;--ofe-bw:2px;--ofe-bc:#93C5FD;--ofe-ts:26px;max-width:600px;margin:22px auto}
.ofe-leads--card .ofe-leads__input{border-color:#CBD5E1}
.ofe-leads--card .ofe-leads__consent a{color:#1D4ED8}
/* editor v2: disposiciones, imagen, sombra, alineación */
.ofe-leads__body{position:relative;min-width:0}
.ofe-leads--sh-soft{box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}.ofe-leads--sh-strong{box-shadow:0 18px 44px -18px rgba(0,0,0,.5)}
.ofe-leads--center{text-align:center}.ofe-leads--center .ofe-leads__row{justify-content:center}.ofe-leads--center .ofe-leads__consent{justify-content:center}
.ofe-leads--btn-full .ofe-leads__btn{width:100%;flex:1 1 100%}
.ofe-leads__icon{font-size:44px;line-height:1;margin:0 0 10px}
.ofe-leads__media{margin:0}.ofe-leads__img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--ofe-radius) - 6px)}
.ofe-leads--l-image-left,.ofe-leads--l-image-right{display:flex;gap:20px;align-items:stretch}
.ofe-leads--l-image-left .ofe-leads__media,.ofe-leads--l-image-right .ofe-leads__media{flex:0 0 38%;min-height:180px}
.ofe-leads--l-image-left .ofe-leads__body,.ofe-leads--l-image-right .ofe-leads__body{flex:1 1 0}
.ofe-leads--l-image-right{flex-direction:row-reverse}
.ofe-leads--l-image-left .ofe-leads__form,.ofe-leads--l-image-right .ofe-leads__form{display:contents}
.ofe-leads--l-image-top{padding-top:0}.ofe-leads--l-image-top .ofe-leads__media{margin:0 calc(-1*var(--ofe-pad)) 16px;max-height:240px;overflow:hidden}.ofe-leads--l-image-top .ofe-leads__img{border-radius:0;max-height:240px}
.ofe-leads--l-image-top{--ofe-ts:24px}.ofe-leads--l-image-top .ofe-leads__media+.ofe-leads__body{padding-top:0}
.ofe-leads--l-image-top .ofe-leads__hp+.ofe-leads__media{margin-top:0}
.ofe-leads--l-banner{background-image:var(--ofe-img);background-size:cover;background-position:center}
.ofe-leads--l-banner::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--ofe-ov));border-radius:inherit}
.ofe-leads--l-banner .ofe-leads__body{position:relative}.ofe-leads--l-banner{--ofe-fg:#fff;--ofe-muted:#E5E7EB}
/* ── Tira compacta ────────────────────────────────────────────────────────────────────
   Estaba a medias: el cuerpo era flex, pero `.ofe-leads__row` y la casilla viven DENTRO del
   <form>, así que nunca fueron hijos del flex y las reglas de abajo no hacían nada. Resultado:
   la «tira» se apilaba como un bloque normal y ocupaba lo mismo que cualquier otro formulario.
   Con `display:contents` en el formulario, sus tres piezas —email+botón, casilla y letra
   pequeña— sí entran en la misma rejilla y la tira vuelve a ser una tira.
   Y la tercera fila se aprovecha: la casilla y el «sin spam» comparten línea en vez de gastar
   dos. 2026-09-12. */
.ofe-leads--l-strip{min-height:0;padding:var(--ofe-pad)}
.ofe-leads--l-strip .ofe-leads__body{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap}
.ofe-leads--l-strip .ofe-leads__form{display:contents}
.ofe-leads--l-strip .ofe-leads__title{margin:0;flex:1 1 180px;font-size:calc(var(--ofe-ts) * .8);line-height:1.25}
.ofe-leads--l-strip .ofe-leads__text,.ofe-leads--l-strip .ofe-leads__subtitle{flex:1 1 100%;margin:0}
/* el email y el botón, juntos: si el email puede encogerse no hace falta partirlos en dos filas */
.ofe-leads--l-strip .ofe-leads__row{flex:2 1 300px;margin:0;flex-wrap:nowrap}
.ofe-leads--l-strip .ofe-leads__input{min-width:0}
/* la tercera fila, en una sola línea */
.ofe-leads--l-strip .ofe-leads__consent{flex:0 1 auto;margin:0;font-size:12.5px}
.ofe-leads--l-strip .ofe-leads__legal{flex:1 1 auto;margin:0;font-size:12.5px;text-align:right}
.ofe-leads--l-strip .ofe-leads__msg{flex:1 1 100%;margin:0}
@media (max-width:600px){
 .ofe-leads--l-strip .ofe-leads__title{flex:1 1 100%;font-size:calc(var(--ofe-ts) * .74)}
 /* en el móvil sí se parten: un email de 150 px y un botón apretado no se dejan pulsar bien */
 .ofe-leads--l-strip .ofe-leads__row{flex:1 1 100%;flex-wrap:wrap}
 /* el «sin spam» se va debajo de la casilla solo si no cabe, no por sistema */
 .ofe-leads--l-strip .ofe-leads__legal{text-align:left}
}
/* ── Ofertitas 2026: la creatividad del cerdito (colores muestreados del PNG) ────────────
   rosa #FF2E86 · tinta #2C3047 · amarillo #FFB524 · azul cielo #4FA8F5 · cielo #C9E6FA→#F4FAFD
   El fondo son tres capas: nubes (radiales blancos), chispas y la ola rosa de abajo (SVG en
   data URI, sin ninguna petición extra). La tipografía usa la redondeada del sistema si la hay. */
.ofe-leads--ofertitas{--ofe-bg:#EAF6FD;--ofe-fg:#2C3047;--ofe-muted:#5A6273;--ofe-accent:#FF2E86;--ofe-amarillo:#FFB524;--ofe-azul:#4FA8F5;--ofe-radius:28px;--ofe-pad:30px;--ofe-ts:38px;--ofe-xs:16px;--ofe-bts:16px;--ofe-br:999px;--ofe-ir:999px;--ofe-bs:none;--ofe-bw:0;--ofe-bfg:#fff;
 font-family:ui-rounded,"SF Pro Rounded","Segoe UI Variable Display",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;max-width:860px;margin:26px auto;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath fill='%23FEBF57' d='M0 74c72-27 142-11 212 5s128 19 188-9v50H0z'/%3E%3Cpath fill='%23FF2E86' d='M0 95c82-29 152-7 232 8s108 5 168-17v34H0z'/%3E%3C/svg%3E") bottom/100% 58px no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cpath fill='%23FFB524' d='M96 12l4 11 11 4-11 4-4 11-4-11-11-4 11-4z'/%3E%3Cpath fill='%23FF7FB4' d='M74 54l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/%3E%3Cpath fill='%23FFB524' d='M14 34l2.5 7 7 2.5-7 2.5-2.5 7-2.5-7-7-2.5 7-2.5z'/%3E%3C/svg%3E") top right/150px 112px no-repeat,
 radial-gradient(46% 34% at 76% 16%,#fff 0 46%,rgba(255,255,255,0) 72%),
 radial-gradient(36% 26% at 22% 10%,rgba(255,255,255,.92) 0 46%,rgba(255,255,255,0) 74%),
 linear-gradient(180deg,#C9E6FA 0,#EAF6FD 44%,#F4FAFD 62%)}
.ofe-leads--ofertitas{padding-bottom:calc(var(--ofe-pad) + 14px)}
.ofe-leads--ofertitas .ofe-leads__title{letter-spacing:-.02em;line-height:1.04}
.ofe-leads--ofertitas .ofe-leads__legal{color:var(--ofe-fg);opacity:.7;font-weight:600}
.ofe-leads--ofertitas .ofe-leads__subtitle{color:var(--ofe-accent);font-weight:900}
.ofe-leads--ofertitas .ofe-leads__input{border:2px solid #fff;box-shadow:0 6px 18px -10px rgba(44,48,71,.45);height:52px;font-weight:600}
.ofe-leads--ofertitas .ofe-leads__input:focus{outline:0;border-color:var(--ofe-accent)}
.ofe-leads--ofertitas .ofe-leads__btn{height:52px;padding:0 26px;box-shadow:0 10px 22px -10px rgba(255,46,134,.85);letter-spacing:.02em}
.ofe-leads--ofertitas .ofe-leads__btn:hover{filter:brightness(1.06)}
.ofe-leads--ofertitas .ofe-leads__consent a{color:#1D4ED8}
.ofe-leads--ofertitas .ofe-leads__msg.is-err{color:#B91C1C}
/* disposición «hero»: mascota a un lado, título subrayado a mano y pastillas de iconos */
.ofe-leads--l-hero{display:flex;gap:22px;align-items:center}
.ofe-leads--l-hero .ofe-leads__media{flex:0 0 32%;min-width:150px;align-self:stretch;display:flex;align-items:flex-end}
.ofe-leads--l-hero .ofe-leads__img{object-fit:contain;object-position:bottom;border-radius:0;max-height:280px;filter:drop-shadow(0 14px 18px rgba(44,48,71,.22))}
.ofe-leads--l-hero .ofe-leads__body{flex:1 1 0;padding-bottom:34px}   /* el texto no se mete en la ola rosa */
.ofe-leads--l-hero .ofe-leads__form{display:contents}
.ofe-leads--l-hero .ofe-leads__title::after{content:"";display:block;width:min(62%,300px);height:9px;margin:7px 0 0;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 9' preserveAspectRatio='none'%3E%3Cpath d='M4 6C70 1 160 0 296 4' stroke='%23FFB524' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") left/100% 100% no-repeat}
.ofe-leads--l-hero.ofe-leads--center .ofe-leads__title::after{margin-inline:auto}
.ofe-leads__chips{display:flex;gap:10px;margin:0 0 var(--ofe-gap)}
.ofe-leads--center .ofe-leads__chips{justify-content:center}
.ofe-leads__chip{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:21px;font-weight:900;line-height:1;color:#fff;background:var(--ofe-accent);box-shadow:0 8px 16px -9px rgba(44,48,71,.6)}
.ofe-leads__chip--2{background:var(--ofe-amarillo,#FFB524)}.ofe-leads__chip--3{background:var(--ofe-azul,#4FA8F5)}
/* ── Móvil: si hay imagen, la tarjeta se apila y la imagen va ENCIMA del texto ─────────
   Dos cosas que fallaban a lo ancho de un móvil:
   · el título se imprimía sobre la foto. La caja de la imagen tenía tope de altura, pero la
     foto de dentro llevaba height:100%, y un porcentaje sobre una caja de altura automática
     no limita nada: la foto salía a su tamaño natural y se desbordaba por debajo, encima del
     texto. Ahora el tope va en la PROPIA imagen (max-height) y con object-fit:contain, que
     además no la recorta.
   · por debajo de 720 px seguían siendo dos columnas espachurradas (antes se apilaban solo por
     debajo de 600). Una imagen y un formulario no caben uno al lado del otro en una pantalla
     estrecha, así que ahora se apilan siempre: imagen arriba, texto y formulario debajo.
   Vale para «imagen a la izquierda», «imagen a la derecha» y «portada Ofertitas». 2026-09-11. */
@media (max-width:720px){
 .ofe-leads--l-image-left,.ofe-leads--l-image-right,.ofe-leads--l-hero{flex-direction:column;align-items:stretch}
 .ofe-leads--l-image-left .ofe-leads__media,.ofe-leads--l-image-right .ofe-leads__media,.ofe-leads--l-hero .ofe-leads__media{
   flex:0 0 auto;display:block;width:100%;min-width:0;min-height:0;height:auto;max-height:none;margin:0 0 14px;overflow:hidden;text-align:center}
 .ofe-leads--l-image-left .ofe-leads__img,.ofe-leads--l-image-right .ofe-leads__img,.ofe-leads--l-hero .ofe-leads__img{
   width:auto;max-width:100%;height:auto;max-height:200px;margin:0 auto;object-fit:contain;object-position:center}
 .ofe-leads--l-image-left .ofe-leads__body,.ofe-leads--l-image-right .ofe-leads__body,.ofe-leads--l-hero .ofe-leads__body{flex:1 1 auto}
 .ofe-leads--l-hero{text-align:center}
 .ofe-leads--l-hero .ofe-leads__title::after{margin-inline:auto}
 .ofe-leads--l-hero .ofe-leads__chips,.ofe-leads--l-hero .ofe-leads__consent{justify-content:center}
 .ofe-leads--ofertitas{--ofe-ts:27px;--ofe-pad:22px}}
/* ── Tres plantillas para el tema nuevo de la Nueva Ofertitas (2026-10-03) ─────────────────
   Hechas mirando la ficha nueva (?nof_tema=1): DM Sans, tarjetas blancas de 18 px sobre gris
   #EDEDED, botón rosa #EF357F y amarillo de descuento #FCD34D. Las tres llevan el subtítulo
   ENCIMA del título (base.php lo pinta antes en estas plantillas) convertido en «cartel».
   Los dibujos van en ::after (y las muescas del cupón en ::before/::after): SVG en data URI,
   sin peticiones extra. En la barra inferior, en la tira y con foto de fondo se quitan. */

/* 1 · ÍNDIGO: violeta noche, cartel y botón amarillos (el amarillo de los descuentos) */
.ofe-leads--indigo{--ofe-bg:#3A23B5;--ofe-fg:#fff;--ofe-muted:#D9D2FF;--ofe-accent:#FCD34D;--ofe-bfg:#1F2430;--ofe-radius:20px;--ofe-pad:28px;--ofe-gap:16px;--ofe-ts:27px;--ofe-xs:16px;--ofe-bts:15px;--ofe-br:12px;--ofe-ir:12px;
 box-shadow:0 20px 40px -24px rgba(58,35,181,.9)}
.ofe-leads--indigo:not(.ofe-leads--l-banner){background:
 radial-gradient(55% 70% at 100% 0%,rgba(255,255,255,.18) 0,rgba(255,255,255,0) 65%),
 radial-gradient(40% 60% at 0% 100%,rgba(239,53,127,.35) 0,rgba(239,53,127,0) 70%),
 linear-gradient(135deg,#2A1A86 0%,#4327CF 55%,#6A47FF 100%)}
.ofe-leads--indigo::after{content:"";position:absolute;top:18px;right:18px;width:118px;height:101px;pointer-events:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 120'%3E%3Cg transform='rotate(8 70 60)'%3E%3Crect x='22' y='14' width='100' height='92' rx='12' fill='%23fff' opacity='.18'/%3E%3Crect x='14' y='22' width='100' height='92' rx='12' fill='%23fff'/%3E%3Crect x='26' y='36' width='46' height='8' rx='4' fill='%23EF357F'/%3E%3Crect x='26' y='52' width='76' height='6' rx='3' fill='%23E5E7EB'/%3E%3Crect x='26' y='64' width='60' height='6' rx='3' fill='%23E5E7EB'/%3E%3Crect x='26' y='82' width='34' height='16' rx='5' fill='%23FCD34D'/%3E%3Ctext x='43' y='94' font-family='Arial' font-weight='700' font-size='10' text-anchor='middle' fill='%231F2430'%3E-60%25%3C/text%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.ofe-leads--indigo .ofe-leads__title,.ofe-leads--indigo .ofe-leads__text{padding-right:140px}
.ofe-leads--indigo .ofe-leads__title{font-weight:800;letter-spacing:-.01em}
.ofe-leads--indigo .ofe-leads__input{border:0;height:50px;min-height:50px}
.ofe-leads--indigo .ofe-leads__input:focus{outline:2px solid var(--ofe-accent)}
.ofe-leads--indigo .ofe-leads__btn{height:50px;padding:0 22px;font-weight:800;box-shadow:0 10px 22px -12px rgba(252,211,77,.9)}
.ofe-leads--indigo .ofe-leads__consent a{color:#FDE68A}

/* 2 · CUPÓN: vale recortable amarillo mantequilla, borde de trazos, muescas y botón rosa */
.ofe-leads--cupon{--ofe-bg:#FFF6D9;--ofe-fg:#1F2430;--ofe-muted:#6B5B3A;--ofe-accent:#EF357F;--ofe-bfg:#fff;--ofe-radius:18px;--ofe-pad:26px;--ofe-gap:16px;--ofe-ts:26px;--ofe-xs:16px;--ofe-bts:15px;--ofe-br:12px;--ofe-ir:12px;
 --ofe-bs:dashed;--ofe-bw:2px;--ofe-bc:#EFC24A;padding-left:calc(var(--ofe-pad) + 8px);padding-right:calc(var(--ofe-pad) + 8px)}
.ofe-leads--cupon::before,.ofe-leads--cupon::after{content:"";position:absolute;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:#fff;border:var(--ofe-bw) var(--ofe-bs) var(--ofe-bc);pointer-events:none}
.ofe-leads--cupon::before{left:-16px}.ofe-leads--cupon::after{right:-16px}
.ofe-leads--cupon .ofe-leads__title{font-weight:800;letter-spacing:-.01em}
.ofe-leads--cupon .ofe-leads__title::after{content:"";display:block;height:0;margin:16px 0 2px;border-top:2px dashed var(--ofe-bc);opacity:.8}
.ofe-leads--cupon .ofe-leads__input{border:1.5px solid #EAD08A;height:50px;min-height:50px;font-weight:500}
.ofe-leads--cupon .ofe-leads__btn{height:50px;padding:0 22px;box-shadow:0 10px 20px -12px rgba(239,53,127,.95);letter-spacing:.03em}
.ofe-leads--cupon .ofe-leads__consent a{color:#C2185B}

/* 3 · MENTA: verde fresco, sobre con aviso y el correo y el botón en una sola pastilla */
.ofe-leads--menta{--ofe-bg:#E6F8EF;--ofe-fg:#0B3B2C;--ofe-muted:#3D6656;--ofe-accent:#0E9F6E;--ofe-bfg:#fff;--ofe-radius:20px;--ofe-pad:26px;--ofe-gap:16px;--ofe-ts:26px;--ofe-xs:16px;--ofe-bts:15px;--ofe-br:999px;--ofe-ir:999px;
 --ofe-bs:solid;--ofe-bw:1px;--ofe-bc:#BFE9D4}
.ofe-leads--menta:not(.ofe-leads--l-banner){background:radial-gradient(60% 80% at 100% 0%,#C9F0DC 0,rgba(201,240,220,0) 70%),linear-gradient(160deg,#EEFBF4 0%,#DDF5E8 100%)}
.ofe-leads--menta::after{content:"";position:absolute;top:20px;right:22px;width:104px;height:84px;pointer-events:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Crect x='10' y='22' width='96' height='64' rx='12' fill='%23fff' stroke='%23A7E3C6' stroke-width='3'/%3E%3Cpath d='M14 28l44 32 44-32' fill='none' stroke='%230E9F6E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='100' cy='22' r='16' fill='%23FCD34D'/%3E%3Ctext x='100' y='28' font-family='Arial' font-weight='700' font-size='17' text-anchor='middle' fill='%231F2430'%3E1%3C/text%3E%3C/svg%3E") center/contain no-repeat}
.ofe-leads--menta .ofe-leads__title,.ofe-leads--menta .ofe-leads__text{padding-right:130px}
.ofe-leads--menta .ofe-leads__title{font-weight:800;letter-spacing:-.01em}
.ofe-leads--menta .ofe-leads__row{padding:6px;background:#fff;border-radius:999px;box-shadow:0 8px 22px -14px rgba(11,59,44,.45);flex-wrap:nowrap}
.ofe-leads--menta .ofe-leads__input{border:0;height:46px;background:transparent}
.ofe-leads--menta .ofe-leads__input:focus{outline:0}
.ofe-leads--menta .ofe-leads__btn{height:46px;padding:0 22px}
.ofe-leads--menta .ofe-leads__consent a{color:#0E7A55}

/* el «cartel»: el subtítulo, encima del título, como una etiqueta pegada un poco torcida.
   Toma el color del botón (amarillo en índigo, rosa en cupón); en menta es una pastilla blanca. */
.ofe-leads--indigo .ofe-leads__subtitle,.ofe-leads--cupon .ofe-leads__subtitle{display:inline-block;max-width:calc(100% - 140px);margin:0 0 12px;padding:5px 11px;border-radius:8px;background:var(--ofe-accent);color:var(--ofe-bfg);font-size:12.5px;font-weight:800;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-1.5deg)}
.ofe-leads--indigo .ofe-leads__subtitle{box-shadow:0 8px 16px -10px rgba(252,211,77,.9)}
.ofe-leads--cupon .ofe-leads__subtitle{max-width:100%;box-shadow:0 6px 14px -8px rgba(239,53,127,.9)}
.ofe-leads--menta .ofe-leads__subtitle{display:inline-block;max-width:calc(100% - 130px);margin:0 0 12px;padding:6px 12px;border-radius:999px;background:#fff;color:#0E7A55;font-size:13px;font-weight:700;line-height:1.3;box-shadow:0 1px 0 #BFE9D4}
.ofe-leads--center .ofe-leads__subtitle{max-width:100%}
/* mensajes de error y sugerencia legibles sobre los fondos claros */
.ofe-leads--cupon .ofe-leads__msg.is-err,.ofe-leads--menta .ofe-leads__msg.is-err{color:#B91C1C}
.ofe-leads--cupon .ofe-leads__msg.is-sug,.ofe-leads--menta .ofe-leads__msg.is-sug{color:#92400E}

/* sin dibujos donde no caben: barra inferior, tira compacta y foto de fondo */
.ofe-leads-ribbon .ofe-leads--indigo::after,.ofe-leads-ribbon .ofe-leads--menta::after,.ofe-leads-ribbon .ofe-leads--cupon::before,.ofe-leads-ribbon .ofe-leads--cupon::after,
.ofe-leads--l-strip.ofe-leads--indigo::after,.ofe-leads--l-strip.ofe-leads--menta::after,.ofe-leads--l-strip.ofe-leads--cupon::before,.ofe-leads--l-strip.ofe-leads--cupon::after,
.ofe-leads--l-banner.ofe-leads--indigo::after,.ofe-leads--l-banner.ofe-leads--menta::after{display:none}
.ofe-leads-ribbon .ofe-leads.ofe-leads--indigo .ofe-leads__title,.ofe-leads-ribbon .ofe-leads.ofe-leads--menta .ofe-leads__title,
.ofe-leads--l-strip.ofe-leads--indigo .ofe-leads__title,.ofe-leads--l-strip.ofe-leads--indigo .ofe-leads__text,
.ofe-leads--l-strip.ofe-leads--menta .ofe-leads__title,.ofe-leads--l-strip.ofe-leads--menta .ofe-leads__text,
.ofe-leads--l-banner.ofe-leads--indigo .ofe-leads__title,.ofe-leads--l-banner.ofe-leads--indigo .ofe-leads__text,
.ofe-leads--l-banner.ofe-leads--menta .ofe-leads__title,.ofe-leads--l-banner.ofe-leads--menta .ofe-leads__text{padding-right:0}
.ofe-leads--l-strip .ofe-leads__subtitle{flex:0 0 auto;max-width:100%}
.ofe-leads--l-banner.ofe-leads--indigo .ofe-leads__subtitle,.ofe-leads--l-banner.ofe-leads--menta .ofe-leads__subtitle{max-width:100%}
/* en la ventana emergente, el dibujo baja un poco para no taparse con la ✕ */
.ofe-leads-dialog .ofe-leads--indigo::after,.ofe-leads-dialog .ofe-leads--menta::after{top:40px}

@media (max-width:600px){
 /* en el móvil el dibujo encoge y se queda en la esquina, a la altura del cartel: el título y el
    texto ya pasan por debajo a todo lo ancho (con 80 px de margen salían en cuatro líneas) */
 .ofe-leads--indigo,.ofe-leads--menta{padding:22px}.ofe-leads--cupon{padding:22px 28px}
 .ofe-leads--indigo::after{width:56px;height:48px;top:10px;right:10px}
 .ofe-leads--menta::after{width:58px;height:46px;top:10px;right:12px}
 .ofe-leads--indigo .ofe-leads__title,.ofe-leads--indigo .ofe-leads__text,.ofe-leads--menta .ofe-leads__title,.ofe-leads--menta .ofe-leads__text{padding-right:0}
 .ofe-leads--indigo .ofe-leads__subtitle,.ofe-leads--cupon .ofe-leads__subtitle{font-size:11.5px;letter-spacing:.04em;padding:5px 9px}
 .ofe-leads--indigo .ofe-leads__subtitle,.ofe-leads--menta .ofe-leads__subtitle{max-width:calc(100% - 62px)}
 .ofe-leads--menta .ofe-leads__subtitle{font-size:12px;padding:5px 10px}
 .ofe-leads--menta .ofe-leads__row{border-radius:18px;flex-wrap:wrap}
 .ofe-leads--indigo .ofe-leads__title,.ofe-leads--cupon .ofe-leads__title,.ofe-leads--menta .ofe-leads__title{font-size:22px}}

/* 4 · LISTADO (4-10-2026): para meterla entre las fichas de categorías y etiquetas. Marriano: «que no rompa
   tanto como la índigo, que es una card gigantesca y demasiado estridente para un listado; algo a medio camino
   y al ancho real de las cards». Medido en /moda/ con el tema nuevo: fichas de 632 px, esquinas de 18, borde
   de 1 px, sombra suave y 16 px entre ellas. Así que: a todo el ancho, lila muy suave, un azulejo índigo con un
   sobre a la izquierda, cartel amarillo pequeño, título de 20 px y correo + botón en una sola fila. */
.ofe-leads--listado{--ofe-bg:#F6F4FF;--ofe-fg:#1F2430;--ofe-muted:#55557A;--ofe-accent:#4327CF;--ofe-bfg:#fff;--ofe-radius:18px;--ofe-pad:18px;--ofe-gap:12px;--ofe-ts:20px;--ofe-xs:15px;--ofe-bts:14px;--ofe-br:12px;--ofe-ir:12px;
 --ofe-bs:solid;--ofe-bw:1px;--ofe-bc:#E2DCFF;min-height:0;max-width:none;margin:0;box-shadow:0 1px 3px rgba(20,24,40,.1)}
.ofe-leads--listado:not(.ofe-leads--l-banner){background:linear-gradient(135deg,#FBFAFF 0%,#F1EDFF 100%)}
.ofe-leads--listado .ofe-leads__body{padding-left:62px}
.ofe-leads--listado .ofe-leads__body::before{content:"";position:absolute;left:0;top:2px;width:46px;height:46px;border-radius:14px;pointer-events:none;box-shadow:0 6px 14px -8px rgba(67,39,207,.8);
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E") center/24px no-repeat,linear-gradient(135deg,#4327CF 0%,#6A47FF 100%)}
.ofe-leads--listado .ofe-leads__subtitle{display:inline-block;max-width:100%;margin:0 0 6px;padding:3px 9px;border-radius:7px;background:#FCD34D;color:#1F2430;font-size:11.5px;font-weight:800;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;transform:rotate(-1deg)}
.ofe-leads--listado .ofe-leads__title{margin-bottom:4px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.ofe-leads--listado .ofe-leads__text{margin-bottom:12px;line-height:1.4}
.ofe-leads--listado .ofe-leads__input{height:44px;min-height:44px;border:1px solid #DDD6FE}
.ofe-leads--listado .ofe-leads__input:focus{outline:2px solid #A78BFA;outline-offset:0}
.ofe-leads--listado .ofe-leads__btn{height:44px;padding:0 18px;font-weight:800;background:linear-gradient(135deg,#4327CF 0%,#5B3BEF 100%);box-shadow:0 8px 16px -10px rgba(67,39,207,.9)}
.ofe-leads--listado .ofe-leads__consent{margin-top:10px;font-size:12.5px}
.ofe-leads--listado .ofe-leads__consent a{color:#4327CF}
.ofe-leads--listado .ofe-leads__legal{font-size:11px}
.ofe-leads--listado .ofe-leads__msg.is-err{color:#B91C1C}.ofe-leads--listado .ofe-leads__msg.is-sug{color:#92400E}
.ofe-leads-ribbon .ofe-leads--listado .ofe-leads__body::before,.ofe-leads--l-strip.ofe-leads--listado .ofe-leads__body::before,.ofe-leads--l-banner.ofe-leads--listado .ofe-leads__body::before{display:none}
.ofe-leads-ribbon .ofe-leads.ofe-leads--listado .ofe-leads__body,.ofe-leads--l-strip.ofe-leads--listado .ofe-leads__body,.ofe-leads--l-banner.ofe-leads--listado .ofe-leads__body{padding-left:0}
@media (max-width:600px){
 .ofe-leads--listado{padding:16px}
 .ofe-leads--listado .ofe-leads__body{padding-left:0}
 .ofe-leads--listado .ofe-leads__body::before{left:auto;right:0;top:0;width:36px;height:36px;border-radius:11px;background-size:18px,auto}
 .ofe-leads--listado .ofe-leads__subtitle{max-width:calc(100% - 46px)}
 .ofe-leads--listado .ofe-leads__title{font-size:19px;padding-right:44px}}

/* ── En la parrilla de la portada ──────────────────────────────────────────────────────
   Cada entrada de la portada lleva 30 px de aire por debajo y una línea de puntos que la
   separa de la siguiente. El formulario se mete entre dos entradas, así que tiene que llevar
   ese mismo cierre: si no, la oferta de debajo se le pega y canta que es un intruso.
   El color se puede cambiar sin tocar esto con --ofe-portada-sep. 2026-09-12. */
.ofe-leads-portada{margin:0 0 30px;padding-bottom:30px;border-bottom:1px dotted var(--ofe-portada-sep,#CACACA)}
.ofe-leads-portada .ofe-leads{margin:0}

/* flotantes (dialog / ribbon) */
.ofe-leads-floating[hidden]{display:none}
.ofe-leads-dialog{border:0;padding:0;background:transparent;max-width:min(560px,94vw);width:100%}
.ofe-leads-dialog::backdrop{background:rgba(17,24,39,.6)}
.ofe-leads-dialog .ofe-leads{margin:0}
.ofe-leads-dialog__close{position:absolute;top:8px;right:10px;background:transparent;border:0;color:inherit;font-size:22px;line-height:1;cursor:pointer;opacity:.7}
.ofe-leads-dialog__close:hover{opacity:1}
.ofe-leads-overlay{position:fixed;inset:0;background:rgba(17,24,39,.6);display:flex;align-items:center;justify-content:center;z-index:99999;padding:16px}
html.ofe-leads-lock{overflow:hidden}
.ofe-leads-ribbon{position:fixed;left:0;right:0;bottom:0;z-index:99998;box-shadow:0 -6px 24px rgba(0,0,0,.25)}
.ofe-leads-ribbon .ofe-leads{margin:0;border-radius:0;min-height:0;max-width:none;width:100%;position:relative;padding:14px 52px 12px 20px;border-width:0;border-top:3px solid var(--ofe-accent)}
.ofe-leads-ribbon .ofe-leads__body{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}.ofe-leads-ribbon .ofe-leads__title{font-size:calc(var(--ofe-ts) * .75);margin:0;flex:1 1 240px;line-height:1.2}.ofe-leads-ribbon .ofe-leads__text,.ofe-leads-ribbon .ofe-leads__subtitle,.ofe-leads-ribbon .ofe-leads__icon,.ofe-leads-ribbon .ofe-leads__media{display:none}.ofe-leads-ribbon .ofe-leads__row{flex:2 1 360px;margin:0;flex-wrap:nowrap}.ofe-leads-ribbon .ofe-leads__row label{position:absolute;left:-9999px}.ofe-leads-ribbon .ofe-leads__input{height:44px}.ofe-leads-ribbon .ofe-leads__btn{height:44px}.ofe-leads-ribbon .ofe-leads__consent{flex:1 1 100%;font-size:12.5px;margin:0}.ofe-leads-ribbon .ofe-leads__legal{display:none}.ofe-leads-ribbon .ofe-leads__msg{flex-basis:100%;margin:0}
.ofe-leads-ribbon__close{top:8px;right:10px}html.ofe-leads-has-ribbon body{padding-bottom:130px}
@media (max-width:600px){.ofe-leads-ribbon .ofe-leads{padding:12px 44px 10px 14px}.ofe-leads-ribbon .ofe-leads__title{flex-basis:100%;font-size:16px}.ofe-leads-ribbon .ofe-leads__row{flex-wrap:wrap}}
/* convivencia con Thrive durante la migración (Estrella apaga thrive_guard al retirarlo) */
body.ofe-leads-active .tve-leads-in-content,body.ofe-leads-active .tl-placeholder-f-type-in_content{display:none!important}