"Inspirados..." (mismo problema de inset:auto) quedaba flotando arriba de todo el diagrama, antes del título. Mismo box que el círculo viejo. */ /* 19-ago (Gina msgs 6466/6470): la caja azul se ABRE 38px por abajo para que el texto "Inspirados por la acuaponía…" quepa con aire (antes quedaba a 1px del borde y encimado con la planta). La franja oscura de fondo SE QUITA: el texto va directo sobre el azul, centrado. El
es hermano del panel dentro del .ciclo-diagram, así que su `bottom` es NEGATIVO para caer en esos 38px de más. */ #grp-ciclo .ciclo-panel{left:0!important;top:2%!important;width:100%!important; height:calc(96% + 38px)!important;border-radius:22px!important} /* banda más abajo que la proporción de escritorio: a 72.252% se montaba con la planta (que en móvil queda más grande relativo al panel). Se recalculó para que empiece justo debajo de la planta y llegue casi al borde inferior. */ #grp-ciclo .ciclo-panel-band{display:none!important} /* fuera la franja (Gina 6470) */ /* la capa del destello va SIEMPRE con las mismas medidas que el anillo, si no el riel de la animación queda desfasado de la línea que se ve */ #grp-ciclo img[src*="quees-ring"], #grp-ciclo .ring-spark-layer{left:15.23%!important;top:16.96%!important;width:69.64%!important;height:66.73%!important} #grp-ciclo img[src*="center-deco"]{left:20%!important;top:25%!important;width:60%!important;height:46%!important} /* 29-jul: assets del Ciclo Biológico migrados a los del Figma real (figma-ciclo-*), las reglas viejas (badge-pez/agua/bacterias/planta) dejaron de aplicar y por eso el diagrama se veía amontonado en móvil — % recalculados con el mismo método "relativo al círculo" que en desktop, aplicado al círculo de ESTE breakpoint (centro 50%/50%, radio 50%/48%, de la regla de quees-circle de arriba). */ #grp-ciclo img[src*="figma-ciclo-pez"]{left:40.80%!important;top:10.94%!important;width:17.92%!important;height:13.43%!important} #grp-ciclo img[src*="figma-ciclo-agua"]{left:6.35%!important;top:38.90%!important;width:17.76%!important;height:17.02%!important} #grp-ciclo img[src*="figma-ciclo-bacterias"]{left:75.96%!important;top:38.90%!important;width:17.76%!important;height:17.02%!important} #grp-ciclo img[src*="figma-ciclo-planta"]{left:43.06%!important;top:74.72%!important;width:11.99%!important;height:13.59%!important} /* caja más ancha para que "Ciclo Biológico de / Acuaponía" caiga en 2 renglones y quede centrado en el círculo (antes se salía en un solo renglón) */ /* 41% de ancho fuerza el corte en "Ciclo Biológico" / "de Acuaponía" (a 60% cabía "Ciclo Biológico de" en el primer renglón) */ /* 43.5% = punto donde el aire hasta el pez de arriba y hasta la planta de abajo queda parejo (34 y 33px). Medido, no a ojo. */ #grp-ciclo h3{left:27%!important;top:43.5%!important;width:46%!important; font-size:clamp(13px,3.7vw,16px)!important;line-height:1.22!important; text-align:center!important;color:#fff!important} /* la frase de abajo va DENTRO de la franja del panel (como en escritorio), no debajo en flujo — la regla vieja (`#grp-ciclo > p`) nunca aplicó porque el
es nieto de #grp-ciclo (vive dentro de .ciclo-diagram), no hijo directo; por eso el texto se iba arriba de todo (ver nota de ciclo-panel). */ /* display:block (NO flex): un
con display:flex trata su propio contenido
inline (texto + + son
elementos hermanos sueltos, no van envueltos por pareja. La columna se asigna
con data-vidx, así no depende del orden del DOM. */
#videosClip{order:8;display:grid!important;position:static!important;
width:auto!important;height:auto!important;inset:auto!important;
grid-template-rows:auto auto;grid-auto-columns:88%;grid-auto-flow:column;
column-gap:14px;row-gap:10px;
margin:0 -20px!important;padding:4px 20px 10px!important;
overflow-x:auto!important;overflow-y:visible!important;
scroll-snap-type:x mandatory;scroll-padding-left:20px;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
background:none!important;box-shadow:none!important;border-radius:0!important}
#videosClip::-webkit-scrollbar{display:none}
#videos .vid-card{position:static!important;left:auto!important;top:auto!important;
width:auto!important;height:auto!important;transform:none!important;opacity:1!important;
pointer-events:auto!important;scroll-snap-align:start}
/* 13-ago: también iframe.vid-card — los videos reales ya no llevan la clase .slot */
#videos .slot.vid-card,#videos iframe.vid-card{grid-row:1;aspect-ratio:16/9;border-radius:16px!important}
#videos p.b.vid-card{grid-row:2;margin-top:0!important}
#videos .vid-card[data-vidx="0"]{grid-column:1}
#videos .vid-card[data-vidx="1"]{grid-column:2}
#videos .vid-card[data-vidx="2"]{grid-column:3}
/* 14-ago: columnas 4 y 5 para los clips de microalgas (ya sin data-extra) */
#videos .vid-card[data-vidx="3"]{grid-column:4}
#videos .vid-card[data-vidx="4"]{grid-column:5}
#videos p.b{font-size:18px!important;color:#f2f4ef!important;margin-top:8px!important}
#videos [data-extra="1"]{display:none!important}
/* ---------- 08 · faqs ---------- */
#faqs{gap:14px}
#faqs > h2{order:1;white-space:normal!important;text-align:left!important;color:#002880!important}
/* 19-ago (Gina msg 6496): fuera 'Encuentra respuestas a las preguntas…' en celular.
:first-of-type y NO 'p' a secas: el otro hijo es el aviso 'No encontramos
preguntas con ese término' del buscador, y ese sí tiene que poder salir. */
#faqs > p:first-of-type{display:none!important}
#faqs > p{order:2;text-align:left!important;color:#071428!important}
#faqs > div.q{order:3;position:relative!important;width:100%!important;height:54px!important;
border-radius:999px!important;padding-left:18px!important;gap:12px!important}
#faqs > div.q span{font-size:15px!important}
/* el buscador heredaba 28px del lienzo de escritorio y cortaba el placeholder */
#faqs #faqSearch{font-size:16px!important;padding-right:16px!important}
/* Las tarjetas pasaron de .m-faq (plano) a .faqx (acordeón). Sin regla de order
se quedaban en 0 y salían ANTES del título y del buscador. */
/* 30-jul: las 6 .faqx ya NO son hijas directas de #faqs — viven dentro de un
wrapper nuevo `.faqx-grid` (desktop: CSS Grid de 3 columnas, para que al
desplegar una pregunta empuje la fila de abajo en vez de tapar). Ese wrapper
hereda `class="a"`, así que `.sec .a` ya le resetea left/top/width/height/
position en móvil — pero NO el `display:grid` inline, que sin esto se
quedaba forzando 3 columnas angostas en el teléfono. `order` también se
movió: antes vivía en `.faqx` (ya no sirve ahí, esas tarjetas dejaron de
ser hijas directas de #faqs), ahora en `.faqx-grid`. */
#faqs .faqx-grid{order:4;display:flex!important;flex-direction:column!important;
gap:14px!important;width:100%!important}
#faqs .faqx{position:relative!important;width:100%!important;
border-radius:18px!important}
#faqs .faqx-head{min-height:0!important;padding:16px 14px!important;gap:12px!important}
#faqs .faqx-leaf{width:24px!important;height:24px!important}
#faqs .faqx-q{font-size:16.5px!important;line-height:1.32!important}
#faqs .faqx-chev{width:38px!important;height:38px!important}
/* mismo criterio que desktop (28-jul): alineada con la hojita (14px, padding-left
de .faqx-head en móvil), no con el texto de la pregunta (50px = 14+leaf 24+gap 12) */
#faqs .faqx-a p{padding:0 16px 18px 14px!important;font-size:15px!important;
line-height:1.45!important}
#faqs #faq-noresults{order:4;text-align:center!important;color:#071428!important}
/* sólo 3 preguntas visibles; "Ver más FAQs" despliega el resto (JS en index.html) */
#faqs.faqs-collapsed .faqx-extra{display:none!important}
#faqs > a{order:5;margin:14px auto 0;background:#37bc2f!important;color:#fff!important}
#faqs > a span{width:26px!important;height:26px!important;font-size:18px!important}
/* ---------- 09 · aliados — "Red viva" hub-and-spoke (6-ago) ---------- */
/* Concepto hub-and-spoke conservado en móvil (pedido explícito de Gina:
"no los conviertas en una lista vertical con una línea común"): nodo
central arriba de una cuadrícula 2x2, con su propia red de conexión
simple (.an-mobile, coordenadas propias distintas al desktop — ver
index.html — porque la proporción cambia por completo, no es el mismo
SVG escalado). El bloque desktop (.a.m-hide con la red completa) ya se
oculta solo via .m-hide; aquí solo hace falta MOSTRAR el bloque móvil
(por default display:none en styles.css) y darle layout. */
#aliados{flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:36px 20px 44px}
#aliados > h2{color:#002880!important;text-align:center!important;width:100%!important}
#aliados > p{text-align:center!important;color:#111!important;max-width:420px;width:100%!important}
#aliados .an-mobile{display:block!important;position:relative;width:100%;
max-width:380px;aspect-ratio:6/5;margin:28px auto 0}
#aliados .an-m-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#aliados .an-hub-m{position:absolute;left:50%;top:50%;width:25%;height:30%;
transform:translate(-50%,-50%) scale(.96);opacity:0;
transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.8,.2,1)}
#aliados.an-inview .an-hub-m{opacity:1;transform:translate(-50%,-50%) scale(1)}
#aliados .an-hub-m .an-hub-disc img{width:78%;height:auto}
#aliados .an-m-grid .an-card{position:absolute;width:23.3%;height:21.3%;
padding:10px;border-radius:16px}
#aliados .an-m-grid .an-card[data-card="cay"]{left:7.78%;top:12.67%}
#aliados .an-m-grid .an-card[data-card="bofish"]{left:68.89%;top:12.67%}
#aliados .an-m-grid .an-card[data-card="sibiolat"]{left:7.78%;top:66%}
#aliados .an-m-grid .an-card[data-card="cyted"]{left:68.89%;top:66%}
#aliados .an-card{opacity:0;transform:translateY(10px) scale(.97);
transition:opacity .5s ease-out,transform .5s ease-out}
#aliados.an-inview .an-card{opacity:1;transform:translateY(0) scale(1)}
#aliados img{position:static!important;object-fit:contain!important;max-width:100%!important;
max-height:100%!important;margin:0}
#aliados .an-card img{width:auto!important;height:auto!important}
/* ---------- 10 · contacto ---------- */
#contacto{gap:14px}
#contacto > h2{order:1;color:#002880!important}
/* 19-ago (Gina msgs 6503/6507): en celular sale el '¿Tienes dudas o quieres
colaborar…' y el recuadro azul se separa del título (15 → 34px medidos). */
#contacto > p{display:none!important}
#grp-contact{margin-top:20px}
#grp-contact{order:3;position:relative!important;background:var(--navy);
border-radius:20px;padding:24px 18px;display:grid!important;
grid-template-columns:46px 1fr;column-gap:14px;row-gap:18px;align-items:center}
#grp-contact > div{position:static!important;width:46px!important;height:46px!important;
border-radius:12px!important;display:flex!important}
#grp-contact > a,#grp-contact > p{position:static!important;color:#fff!important;
font-size:16px!important;font-weight:500!important;margin:0!important}
/* "Enviar mensaje" no tenía order → salía arriba del título */
#contacto > a{order:4;margin-top:8px}
/* ---------- 11 · footer ---------- */
/* padding-top más corto = el logo sube; margin-bottom = más aire con el texto
(estaban a 10px, se veían pegados) */
#footer{gap:10px;padding-top:42px;padding-bottom:40px}
#footer > img[src*="foot-logo"]{margin-bottom:0}
/* patrón de peces: las medidas inline (height:121.48%) están calculadas contra el
footer de escritorio (1920×419, proporción 4.58). En móvil el footer es 390×833
(0.47) y esos % estiraban los peces a lo alto. object-fit:cover conserva su
proporción real (3065×815) y recorta en vez de deformar. */
/* como en escritorio: el patrón se ancla ABAJO, a su proporción real y a una
escala en la que los peces y los brotes todavía se distinguen. `cover` sobre
un footer tan alto lo ampliaba tanto que ya no se leía el dibujo. */
#footer .m-keep > img{position:absolute!important;left:-60%!important;top:auto!important;
bottom:0!important;width:220%!important;height:auto!important;
object-fit:contain!important}
/* mismo caso que el logo del menú: alto explícito (190 / 5.021 = 37.8) */
#footer > img[src*="foot-logo"]{position:static!important;width:160px!important;
height:32px!important;object-fit:contain}
#footer > p.q{color:#c7f3ff!important;font-size:13.5px!important}
#footer a{padding:5px 0;font-size:14px!important;color:#c7f3ff!important;width:fit-content!important}
/* ===== acomodo tipo referencia de Gina: todo centrado, en filas separadas por
líneas verdes, sin los títulos de columna ===== */
#footer{align-items:center;text-align:center}
#footer h3{display:none!important} /* Navegación / Contacto / Síguenos */
#footer > img[src*="foot-logo"]{align-self:center}
/* text-wrap:balance reparte los renglones parejo y evita que "sostenible."
se quede colgando solita en el último */
/* 19-ago (Gina msgs 6508/6511): el lema quedaba en 4 renglones y se veía raro.
Con 340px de caja cae en 3 sin tocar el texto ni el
) como flex items en fila, y el
deja de forzar
el salto de línea — se veía "Inspirados" solo arriba y el resto amontonado.
29-jul v2: Gina señaló que el texto seguía "mal" — en la foto de referencia
va alineado a la IZQUIERDA (no centrado) con más presencia, no centrado y
diminuto. Ajustado a la izquierda + fuente más grande (el techo real son
los ~23px de alto que quedan entre la planta y el borde del panel). */
/* 19-ago (Gina msg 6470): ahora lo quiere CENTRADO — cambia el criterio del 29-jul
(que lo pedía a la izquierda, cuando el texto vivía dentro de la franja oscura).
Al desaparecer la franja y abrirse la caja, va centrado bajo el círculo.
`bottom` negativo = cae en los 38px que el panel crece por debajo del diagrama. */
#grp-ciclo .ciclo-diagram > p{left:6%!important;top:auto!important;bottom:-20px!important;
width:88%!important;height:auto!important;display:block!important;
font-size:clamp(8px,2.35vw,10.5px)!important;line-height:1.4!important;
text-align:center!important;color:#fff!important}
/* 4 tarjetas flip en 2×2 (antes eran tarjetas-foto planas con data-label; el rediseño
a .qflip dejó obsoleta aquella regla y estiraba el ícono a toda la tarjeta) */
/* 19-ago (Gina msg 6478): las tarjetas quedaban PEGADAS al párrafo (0px medidos)
al reordenar la sección; 22px de aire y todo lo de abajo baja con ellas. */
#grp-qcards{order:3;display:grid!important;grid-template-columns:1fr 1fr;gap:8px;
margin-top:22px}
/* tarjetas más achatadas (1.18 → 1.45 → 1.7) para bajar la altura del bloque 2x2
y dejarle más aire al círculo del ciclo */
#quees .m-card{position:relative!important;width:100%!important;
aspect-ratio:1.7;border-radius:14px!important;overflow:hidden;margin:0}
#quees .m-card::after{content:none!important}
/* sólo la foto y la veladura cubren la tarjeta; el ícono NO */
#quees .m-card .qf-photo,#quees .m-card .qf-ov{position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;object-fit:cover}
#quees .m-card .qf-icon{position:relative!important;inset:auto!important;
width:auto!important;height:30%!important;object-fit:contain!important;margin-bottom:6px}
#quees .m-card .qf-title{font-size:15.5px!important;line-height:1.15!important;
text-align:center!important}
#quees .m-card .qf-more{font-size:10.5px!important;padding:3px 10px!important;margin-top:5px}
/* la tarjeta se acható mucho hoy (aspect-ratio 1.7) y el botón "‹ Volver"
(absolute, top-right) tapaba el texto centrado — Gina prefirió QUITAR el
botón en vez de reacomodarlo. Se oculta en móvil y toda la cara trasera
de la tarjeta se vuelve tocable para voltear de regreso (ver JS abajo). */
#quees .m-card .qflip-back{padding:14px 12px!important}
#quees .m-card .qflip-back p{font-size:11.5px!important;line-height:1.3!important;
text-align:center!important}
#quees .m-card .qf-back-btn{display:none!important}
/* ---------- 04 · anúnciate ---------- */
/* Rehecho a partir del frame de Figma node 560:71 ("Anúnciate aquí", 350×86px —
Gina lo mandó como reemplazo directo tras ver el preview del 560:65, más chico).
Mismo patrón grid que la iteración anterior (texto+botón izquierda, peces
derecha), sólo se recalibraron medidas para calzar con el frame nuevo. */
/* margin-top:-120px es un ajuste SOLO de escritorio (cerrar el espacio vacío
al final de #quees) — en móvil el layout de #quees es completamente distinto
(columna apilada), así que se anula aquí para no encimar secciones. */
#anunciate{padding:18px 20px;margin-top:0!important}
/* la columna de la imagen va con ancho FIJO (no "auto"): un % en un track auto
no tiene contenedor definido contra el cual resolverse y el navegador lo
descarta silenciosamente (Chrome la dejó en 66px en vez de los 150 pedidos) */
#grp-anuncio{position:relative!important;border-radius:10px;overflow:hidden;
padding:16px 17px;display:grid!important;
grid-template-columns:1fr 150px;grid-template-rows:auto auto;
align-items:center;column-gap:10px}
#grp-anuncio > [data-slot="anuncio"]{position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;border-radius:10px!important;z-index:0}
#grp-anuncio > h2{position:relative;z-index:1;color:#002880!important;
grid-column:1;grid-row:1;margin:0;
font-size:clamp(19px,5.6vw,21px)!important;line-height:1.18!important}
#grp-anuncio > a{position:relative;z-index:1;background:#037cff!important;color:#fff!important;
grid-column:1;grid-row:2;justify-self:start;margin-top:6px;
min-height:18px!important;padding:4px 14px!important;font-size:10px!important}
#grp-anuncio > img{position:relative!important;z-index:1;grid-column:2;grid-row:1/3;
justify-self:end;width:150px!important;height:auto!important;margin-top:0}
/* ---------- 05 · eventos ---------- */
/* padding/gap propios para que toda la sección (pill+título+botón+carrusel+
"Explora por categoría"+tarjetas) quepa como bloque en 1 pantalla */
#eventos{gap:10px;padding:40px 20px}
/* pill "Eventos" reconstruida solo con el texto */
#eventos > p.q{order:1;display:inline-flex;width:fit-content!important;
border:1.5px solid var(--green);border-radius:999px;padding:8px 22px!important;
font-size:16px!important;color:var(--green)!important}
#eventos > h2{order:2;color:#fff!important;font-size:clamp(22px,6.6vw,29px)!important}
/* mismo tamaño que "Próximos eventos" del hero (antes heredaba el pill genérico
de 48px/17px, se veía más grande que su gemelo) */
/* 19-ago (Gina msg 6497): el botón "Explorar eventos" sale en celular. */
#eventos > a[href="#"]{display:none!important;order:3;background:#2bc38a!important;color:#fff!important;
padding:8px 20px!important;font-size:15px!important;min-height:40px!important}
/* rectángulo menos alto: 16/10 → 16/7 → 16/6 */
#eventos > [data-slot="eventos-carrusel"]{order:4;position:relative!important;
width:100%!important;aspect-ratio:16/6;border-radius:22px!important;margin-top:4px}
/* el contenido de los placeholders estaba calculado para la caja alta (152px de
contenido en una caja de 153) — se encoge para que respire */
#eventos .ev-carr-slide{gap:6px!important;padding:8px!important}
#eventos .ev-carr-slide > div{width:38px!important;height:38px!important;
border-radius:10px!important;flex:none}
#eventos .ev-carr-slide > div img{width:20px!important;height:20px!important}
#eventos .ev-carr-slide p{font-size:12px!important;line-height:1.15!important;
text-align:center!important}
#eventos > h3{order:5;color:#fff!important;margin-top:8px}
/* 2 columnas — 4 tarjetas (Webinars se oculta en móvil) → 2×2 */
#cat-cards{order:6;position:static!important;width:100%!important;height:auto!important;
display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}
#cat-cards > div{min-height:0;padding:14px 10px;border-radius:16px!important;
gap:8px!important}
/* el ícono venía a tamaño de escritorio (78.9px) sin override — era el mayor
responsable del alto de la tarjeta en móvil */
#cat-cards .cat-icon-badge{width:44px!important;height:44px!important;
border-radius:12px!important}
#cat-cards .cat-icon-badge img{width:22px!important;height:22px!important}
/* sin Webinars quedan 4 → 2×2 exacto, ya no hace falta la fila completa */
#cat-cards > .cat-card-webinars{display:none!important}
/* el text-align:left global de `.sec p` le ganaba al center inline de las tarjetas */
#cat-cards p{text-align:center!important}
#cat-cards p.b{font-size:16px!important;line-height:1.18!important}
#cat-cards p.q{font-size:10.5px!important;letter-spacing:1px!important}
/* ---------- 06 · entérate ---------- */
#enterate{gap:16px}
#enterate > h2{order:1;text-align:left!important;color:#002880!important}
/* 19-ago (Gina msg 6482/6485): en celular la sección se queda SÓLO con el título;
el subtítulo 'Noticias, tendencias y casos…' sale. En escritorio sigue igual. */
#enterate > p{display:none!important}
/* carrusel deslizable: se ve UNA tarjeta y las demás se alcanzan arrastrando.
scroll-snap deja cada tarjeta cuadrada al soltar. Se desborda 20px a cada lado
con margen negativo para que las tarjetas lleguen al filo de la pantalla. */
#enterateClip{order:3;display:flex!important;flex-direction:row!important;
position:static!important;width:auto!important;height:auto!important;inset:auto!important;
margin:0 -20px!important;padding:4px 20px 10px!important;gap:14px;
overflow-x:auto!important;overflow-y:visible!important;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
scroll-padding-left:20px;
scrollbar-width:none;background:none!important;box-shadow:none!important;
border-radius:0!important}
#enterateClip::-webkit-scrollbar{display:none}
#enterate .m-note{position:relative!important;left:auto!important;top:auto!important;
/* 88% deja asomando un pedacito de la nota siguiente: es la señal visual
de que la tira se puede arrastrar */
flex:0 0 88%!important;width:88%!important;height:auto!important;
scroll-snap-align:start;transform:none!important;opacity:1!important;
pointer-events:auto!important;
border-radius:22px!important;padding:16px 16px 20px;background:#fff!important;
display:flex;flex-direction:column;box-shadow:0 3px 10px rgba(0,0,0,.12)!important}
/* 19-ago (Gina 6485): fotos de las notas más bajitas, 155→130px. El height va con
!important porque el trae height:36.35% inline y sin eso gana el inline. */
#enterate .m-note > img{position:static!important;width:100%!important;aspect-ratio:auto!important;
height:130px!important;border-radius:14px!important;object-fit:cover}
#enterate .m-note > div{position:static!important;width:100%!important;margin-top:14px}
#enterate .m-note h3{font-size:19px!important;line-height:1.25!important}
#enterate .m-note p{font-size:15px!important;line-height:1.5!important;margin-top:8px!important}
#enterate .m-note a{margin-top:12px!important;font-size:15px!important}
#enterate .m-note[data-extra="1"]{display:none!important}
/* newsletter como bloque navy */
#grp-news{order:7;position:relative!important;margin-top:10px;border-radius:20px;
overflow:hidden;background:var(--navy);padding:26px 20px;gap:12px}
#grp-news > div:first-child{position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;border-radius:0!important;z-index:0}
#grp-news > div:first-child img{opacity:.22}
#grp-news > h3{position:relative;z-index:1;color:#fff!important;
font-size:clamp(22px,6.4vw,28px)!important;line-height:1.15!important}
/* el
de escritorio (corta justo antes de "tendencias") queda mal en la
columna angosta de móvil — "tendencias" arrancaba su propio renglón suelto.
Se apaga y el texto fluye solo según el ancho real. */
#grp-news > p{display:none!important} /* fuera 'Sé el primero en conocer…' (Gina 6485) */
#grp-news > p br{display:none}
#grp-news > form{position:relative;z-index:1;width:100%!important}
#grp-news input{width:100%!important;height:52px!important;font-size:16px!important;
border-width:2px!important;border-radius:14px!important;padding:0 16px!important}
#grp-news > button{position:relative;z-index:1;width:100%!important;height:50px!important;
border-radius:14px!important;font-size:17px!important;margin-top:2px;cursor:pointer}
/* ---------- 07 · videos ---------- */
#videos{gap:14px}
#videos > h2{order:1;color:#fff!important}
#videos > p.q.vid-lead{order:2;color:#fff!important}
#videos > p.q[style*="uppercase"]{order:3;margin-top:10px;
font-size:13px!important;letter-spacing:1.6px!important;color:var(--green)!important}
#videos > [data-slot="video1"]{order:4;position:relative!important;width:100%!important;
aspect-ratio:16/9;border-radius:20px!important;box-shadow:0 0 22px -6px var(--green)!important}
/* caption del video destacado: no tenía regla de order → se iba hasta arriba (order 0) */
#videos > p.b:not([data-vidx]){order:5;margin-top:6px!important}
/* 13-ago: el link ya no apunta a #videos (ahora abre el video en YouTube),
así que se selecciona por id en vez de por href */
/* 19-ago (Gina msg 6495): en celular se quita el enlace verde "Ver video" que iba
debajo del título del video destacado — el propio reproductor ya lleva al video.
En escritorio se queda. */
#videos > a#verVideoLink{display:none!important}
#videos > div.q{order:7;margin-top:14px;width:fit-content!important;
padding:10px 24px!important;font-size:16px!important;border-radius:999px!important;
display:inline-flex!important;background:var(--green)!important;color:#fff!important}
/* carrusel deslizable igual que Entérate. Se usa GRID (no flex) para que cada
columna lleve el video arriba y su título abajo: los
del diseño. Sólo móvil. */
#footer > p.q{text-align:center!important;max-width:340px;align-self:center;
text-wrap:balance}
/* fila de contacto: ícono + texto, en rejilla centrada */
#grp-footcontact{position:static!important;display:grid!important;
grid-template-columns:auto auto;justify-content:center;align-items:center;
column-gap:9px;row-gap:9px;margin:2px 0}
#grp-footcontact .m-hide{display:flex!important;position:static!important;
width:25px!important;height:25px!important;border-radius:7px!important;flex:none}
#grp-footcontact > div:nth-of-type(1){grid-area:1/1}
#grp-footcontact > div:nth-of-type(2){grid-area:2/1}
#grp-footcontact > div:nth-of-type(3){grid-area:3/1}
#grp-footcontact > a:nth-of-type(1){grid-area:1/2}
#grp-footcontact > a:nth-of-type(2){grid-area:2/2}
#grp-footcontact > p{grid-area:3/2}
#grp-footcontact > a,#grp-footcontact > p{position:static!important;
justify-self:start;padding:0!important;text-align:left!important;
font-size:14px!important;color:#c7f3ff!important}
/* navegación como tira corrida, centrada y entre dos líneas verdes */
#grp-footnav{position:static!important;display:flex!important;flex-direction:row!important;
flex-wrap:wrap!important;align-items:center;justify-content:center;gap:0;
width:100%!important;margin:4px 0;padding:9px 0;
border-top:1px solid rgba(55,188,47,.5);border-bottom:1px solid rgba(55,188,47,.5)}
#footer #grp-footnav a{position:static!important;width:auto!important;
padding:6px 0!important;display:inline-flex!important;align-items:center}
/* puntitos verdes, como en la referencia */
#footer #grp-footnav a:not(:last-child)::after{content:'•';margin:0 11px;
color:var(--green);font-size:15px}
/* ancho completo + alto cero = corta el renglón sin ocupar espacio */
#grp-footnav .footnav-break{display:block!important;width:100%!important;height:0!important}
#grp-social{flex-direction:row!important;justify-content:center;gap:14px;margin-top:6px}
/* min-height:0 obligatorio: la regla global de botones-pill les metía min-height:48px
(los links traen border-radius inline), así que el círculo salía de 40×48 = óvalo,
y el ícono de adentro se estiraba con él (los SVG traen preserveAspectRatio="none") */
#grp-social a{position:static!important;width:40px!important;height:40px!important;
min-height:0!important;padding:0!important;flex:none;
border-radius:50%!important;display:flex!important}
#grp-social a img{width:45%!important;height:45%!important;aspect-ratio:1!important}
/* copyright centrado, sin línea divisoria (Gina la quitó) */
#footer > p.q:last-child{width:100%!important;max-width:none!important;
margin-top:16px;padding-top:0;font-size:12px!important;opacity:.85;
border-top:0}
#footer .footcopy-break{display:inline!important}
/* 2º banner "Anúnciate aquí" al final de FAQs — sólo celular (Gina msg 6496).
Mismas medidas que el de arriba en móvil: caja con proporción y los hijos
posicionados en % dentro de ella. */
.solo-movil{display:block!important}
/* 2º banner "Anúnciate aquí" al final de FAQs (Gina msg 6496): clona TAL CUAL las
reglas del banner de arriba (#grp-anuncio) para que se vean idénticos — mismo
grid, mismos tamaños de título/botón y la misma imagen de 150px. */
#grp-anuncio2{order:9;margin-top:22px;
position:relative!important;border-radius:10px;overflow:hidden;
padding:16px 17px;display:grid!important;
grid-template-columns:1fr 150px;grid-template-rows:auto auto;
align-items:center;column-gap:10px}
#grp-anuncio2 > [data-slot="anuncio-2"]{position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;border-radius:10px!important;z-index:0}
#grp-anuncio2 > h2{position:relative;z-index:1;color:#002880!important;
grid-column:1;grid-row:1;margin:0;
font-size:clamp(19px,5.6vw,21px)!important;line-height:1.18!important}
#grp-anuncio2 > a{position:relative;z-index:1;background:#037cff!important;color:#fff!important;
grid-column:1;grid-row:2;justify-self:start;margin-top:6px;
min-height:18px!important;padding:4px 14px!important;font-size:10px!important}
#grp-anuncio2 > img{position:relative!important;z-index:1;grid-column:2;grid-row:1/3;
justify-self:end;width:150px!important;height:auto!important;margin-top:0}
}