/* Soporte Publicitario 2026.
   La identidad viene del sitio de 2010: el azul y el naranja del logo, la hoja
   blanca sobre fondo pizarra, las pestañas grises, el menú de categorías a la
   izquierda con su barra celeste, los precios en azul con "+ IVA" en rojo.
   Los colores son los del manual de marca (tokens.json), con sus mismos nombres:
   --azul es el azul marino del logotipo de 2010. */
:root {
  --azul: #002159; --azul-hover: #1a3b73; --naranja: #ff9000; --amarillo: #ffc000;
  --sobre-azul: #e6e8ff; --sobre-naranja: #1c1200; --naranja-rotulo: #b25f00; --sobre-pizarra-suave: #b9c3ca;
  --celeste: #0077b6; --titulo: #196c97; --precio: #2b4c80; --iva: #a70904;
  --pizarra: #3d4a52; --gris: #eef0f2; --borde: #d5dade; --texto: #1c2730; --suave: #56636e;
  --ok: #17803d; --ver: #8a5200; --wsp: #0f7d43; --r: 10px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--texto); background: var(--pizarra); }
img { max-width: 100%; height: auto; }
a { color: var(--celeste); }
a:hover { color: var(--azul); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.75rem; color: var(--azul); overflow-wrap: anywhere; }
h2 { font-size: 1.25rem; color: var(--azul); }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
.oculto, .trampa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salto { position: absolute; left: -9999px; top: 0; background: #fff; padding: 10px 16px; z-index: 100; }
.salto:focus { left: 8px; top: 8px; }
.ancho, .hoja { max-width: 1240px; margin: 0 auto; }

/* Franja superior */
.franja { background: var(--azul); color: #fff; font-size: .8125rem; }
.franja .ancho { display: flex; justify-content: space-between; gap: 16px; padding: 6px 24px; }
.franja a { color: #fff; text-decoration: none; }
.franja a:hover { text-decoration: underline; }

/* La hoja */
.hoja { background: #fff; margin-top: 14px; border-radius: 14px 14px 0 0; overflow: hidden; }
/* El logotipo deja libre a su alrededor medio cuadro azul (unos 30 px a este tamaño). */
.cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 26px 24px; }
.logo img { display: block; }
.buscador { position: relative; display: flex; max-width: 560px; }
.buscador input { flex: 1; min-width: 0; font: inherit; padding: 11px 14px; border: 2px solid var(--azul); border-right: 0; border-radius: 8px 0 0 8px; background: #fff; }
.buscador button { font: inherit; font-weight: 600; padding: 0 18px; border: 2px solid var(--azul); background: var(--azul); color: #fff; border-radius: 0 8px 8px 0; cursor: pointer; }
.sugerencias { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid var(--borde); border-radius: 0 0 8px 8px; box-shadow: 0 10px 24px rgb(0 0 0 / .16); }
.sugerencias a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; text-decoration: none; color: var(--texto); font-size: .875rem; border-top: 1px solid var(--gris); }
.sugerencias a:hover, .sugerencias a:focus { background: var(--gris); }
.sugerencias b { color: var(--precio); white-space: nowrap; }
.cab-contacto { display: flex; align-items: center; gap: 14px; }
.fono { font-size: 1.25rem; font-weight: 700; color: var(--texto); text-decoration: none; white-space: nowrap; }

.btn { display: inline-block; font: inherit; font-weight: 600; padding: 11px 18px; border: 0; border-radius: 8px; background: var(--azul); color: #fff; text-decoration: none; cursor: pointer; text-align: center; }
.btn:hover { background: var(--azul-hover); color: #fff; }
.btn.wsp { background: var(--wsp); }
.btn.wsp:hover { background: #0b6535; }
.btn.claro { background: #fff; color: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); }
.btn.chico { padding: 6px 12px; font-size: .875rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }

/* Pestañas, como las de 2010 */
.nav { background: linear-gradient(#f7f7f7, #dfdfdf); border-block: 1px solid #cfcfcf; }
.nav ul { display: flex; overflow-x: auto; scrollbar-width: thin; }
.nav a { display: block; padding: 12px 20px; color: #444; text-decoration: none; text-transform: uppercase; font-size: .875rem; letter-spacing: .02em; white-space: nowrap; border-right: 1px solid #cfcfcf; }
.nav a:hover, .nav a[aria-current] { background: #fff; color: var(--celeste); }
.solo-movil { display: none; }

/* Contenido + menú lateral (a la izquierda, como siempre) */
.pagina { display: grid; grid-template-columns: 270px minmax(0, 1fr); grid-template-areas: "lateral contenido"; gap: 28px; padding: 22px 24px 40px; }
main { grid-area: contenido; min-width: 0; }
.lateral { grid-area: lateral; }
main > section, main > article { margin-bottom: 36px; }
.modulo { background: var(--gris); margin-bottom: 14px; border-radius: 0 0 6px 6px; }
.modulo-tit { margin: 0; padding: 10px 14px; font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: linear-gradient(#2b9fdc, #0b6fb0); }
.menu > li { border-top: 2px solid #fff; }
.menu a { display: block; padding: 8px 14px; color: #333; text-decoration: none; font-size: .84rem; text-transform: uppercase; }
.menu a:hover, .menu a[aria-current], .menu .en-rama > a { color: var(--celeste); }
.menu a[aria-current] { font-weight: 700; }
.menu ul { background: #e2e5e8; padding: 4px 0; }
.menu ul a { padding: 5px 14px 5px 26px; font-size: .8rem; }
.menu ul ul a { padding-left: 38px; }
.menu ul ul ul a { padding-left: 50px; }
.menu .oferta a { color: var(--iva); font-weight: 700; }
.datos { padding: 10px 14px; font-size: .875rem; }
.datos li { padding: 3px 0; }
.datos.grande { padding: 0; font-size: 1rem; list-style: none; }
/* El rotulo a la izquierda y el dato a su derecha, tambien cuando el dato baja de linea. */
.datos.grande li { padding: 8px 0 8px 9.5em; text-indent: -9.5em; border-bottom: 1px solid var(--gris); }
.datos b { display: inline-block; min-width: 9.5em; }
.datos.grande b { width: 9.5em; text-indent: 0; }
.contacto .texto h2 { margin-top: 0; }

.migas ol { display: flex; flex-wrap: wrap; font-size: .8125rem; margin-bottom: 14px; color: var(--suave); }
.migas li + li::before { content: "▸"; color: var(--naranja); margin: 0 7px; }
.intro { color: var(--suave); margin: 0 0 16px; max-width: 70ch; }
.n { color: var(--suave); font-size: .8em; font-weight: 400; }
.nota { font-size: .8125rem; color: var(--suave); margin: 8px 0; }

/* Portada */
.heroe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: stretch; }
.heroe-txt { background: var(--azul); color: #fff; border-radius: 12px; padding: 28px; display: flex; flex-direction: column; justify-content: center;
  background-image: radial-gradient(circle at 100% 0, rgb(255 144 0 / .55) 0, rgb(255 144 0 / 0) 46%); }
.heroe-txt h1 { color: #fff; font-size: 1.9rem; }
.sobre { margin: 0 0 8px; color: var(--amarillo); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.bajada { margin: 0; color: #e6e8ff; }
.heroe-txt .btn { background: var(--naranja); color: #1c1200; }
.heroe-txt .btn:hover { background: var(--amarillo); color: #1c1200; }
.heroe-txt .btn.wsp { background: #fff; color: var(--wsp); }
.familias { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.familias a { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-content: center; height: 100%; padding: 8px 10px; text-decoration: none; color: #333;
  background: linear-gradient(#f7f7f7, #e3e3e3); border: 1px solid #d3d3d3; border-radius: 6px; }
.familias a:hover { border-color: var(--celeste); }
.familias img { grid-row: 1 / 3; width: 84px; height: 84px; object-fit: contain; background: #fff; border: 1px solid #d3d3d3; border-bottom: 3px solid var(--naranja); }
.fam-tit { align-self: end; font-weight: 600; text-transform: uppercase; color: #3a3a3a; }
.fam-txt { align-self: start; font-size: .8125rem; color: #5f5f5f; }
.cuentas { background: var(--gris); border-left: 5px solid var(--naranja); border-radius: 6px; padding: 18px 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; font-size: 1.125rem; font-weight: 700; }
.chips li:nth-child(odd) { color: var(--azul); }
.chips li:nth-child(even) { color: #c66a00; }
.cuentas p { margin: 0; color: var(--suave); }
.secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.secciones a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px; border: 1px solid var(--borde); border-radius: var(--r); text-decoration: none; color: var(--texto); }
.secciones a:hover { border-color: var(--celeste); box-shadow: 0 4px 14px rgb(0 0 0 / .08); }
.secciones img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.sec-tit { font-weight: 700; color: var(--azul); }
.sec-txt { font-size: .8125rem; color: var(--suave); flex: 1; }
.sec-n { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #b25f00; font-weight: 600; }
.valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.valores div { border-top: 4px solid var(--azul); background: var(--gris); padding: 16px; border-radius: 0 0 6px 6px; }
.valores div:nth-child(even) { border-top-color: var(--naranja); }
.valores h2 { font-size: 1.0625rem; }
.valores p { margin: 0; font-size: .9rem; color: var(--suave); }

/* Listados */
.subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.subcats a { display: block; padding: 6px 12px; border: 1px solid var(--borde); border-radius: 999px; font-size: .8125rem; color: #2b3640; text-decoration: none; background: #fff; }
.subcats a:hover { border-color: var(--celeste); color: var(--celeste); }
.indice { border-top: 1px solid var(--borde); padding-top: 16px; }
.indice h2 a { text-decoration: none; color: var(--azul); }
.indice p { margin: 0 0 10px; color: var(--suave); font-size: .9rem; }
.orden { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; font-size: .875rem; color: var(--suave); }
.orden p { margin: 0 auto 0 0; }
.orden select { font: inherit; padding: 5px 8px; border: 1px solid var(--borde); border-radius: 6px; background: #fff; }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 14px; }
.prod { display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--r); padding: 12px; background: #fff; }
.prod:hover { border-color: var(--celeste); box-shadow: 0 4px 14px rgb(0 0 0 / .08); }
.prod-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.prod h3 { font-size: .875rem; font-weight: 700; margin: 10px 0 6px; }
.prod h3 a { color: var(--titulo); text-decoration: none; }
.prod h3 a:hover { text-decoration: underline; }
.prod-info { display: flex; flex-direction: column; flex: 1; }
.prod-info .precio.socio { margin-top: auto; }
.prod-meta { margin: 0 0 8px; font-size: .78rem; color: var(--suave); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.disp { font-weight: 600; }
.disp::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: currentColor; }
.disp.ok { color: var(--ok); }
.disp.ver { color: var(--ver); }
.precio { margin: 0; line-height: 1.3; }
.precio b { color: var(--precio); font-size: 1.2rem; }
.precio.directo b { font-size: .95rem; font-weight: 600; }
.iva { color: var(--iva); font-weight: 700; font-size: .75rem; }
.rotulo { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.precio.directo { margin-top: 4px; }
.precio.directo .rotulo { display: inline; }
.desde { margin: 4px 0 0; font-size: .78rem; color: var(--suave); }
.paginas ul { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 24px; }
.paginas a, .paginas span { display: block; min-width: 40px; padding: 8px 12px; text-align: center; border: 1px solid var(--borde); border-radius: 6px; text-decoration: none; }
.paginas span[aria-current] { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 700; }

/* Ficha de producto */
.ficha { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 28px; align-items: start; }
.ficha .texto { grid-column: 1 / -1; }
.foto-principal img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--borde); border-radius: var(--r); background: #fff; }
.minis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.minis img { display: block; width: 70px; height: 70px; object-fit: contain; border: 1px solid var(--borde); border-radius: 6px; }
.minis a[aria-current] img { outline: 3px solid var(--naranja); outline-offset: -1px; }
.resumen h1 { font-size: 1.5rem; color: var(--titulo); }
.caja-precio { background: var(--gris); border-left: 5px solid var(--naranja); border-radius: 6px; padding: 14px 18px; margin: 14px 0; }
.caja-precio .precio.socio b { font-size: 2rem; }
.caja-precio .precio.directo b { font-size: 1.1rem; }
.caja-precio .nota { margin: 6px 0 0; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
caption { text-align: left; font-weight: 700; color: var(--azul); padding-bottom: 6px; }
caption span { font-weight: 400; color: var(--suave); font-size: .8125rem; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--borde); }
thead th { background: var(--gris); font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em; }
.volumen td:nth-child(2) { font-weight: 700; color: var(--precio); }
.espec th { width: 42%; background: var(--gris); font-weight: 600; }
.calculo { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.calculo input { font: inherit; width: 6.5em; padding: 7px 9px; border: 1px solid var(--borde); border-radius: 6px; }
.calculo output { font-weight: 700; color: var(--precio); }
.texto { max-width: 78ch; }
.texto h2 { margin-top: 1.4em; }
.texto ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.texto p { margin: 0 0 1em; }

/* Contacto */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.formulario > * { grid-column: 1 / -1; margin: 0; }
.formulario .mitad { grid-column: span 1; }
.campo label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 4px; }
.campo input, .campo textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #aab3ba; border-radius: 6px; background: #fff; }
.campo [aria-invalid="true"] { border-color: var(--iva); background: #fff6f5; }
.aviso:empty { display: none; }
.aviso { padding: 10px 14px; border-radius: 6px; background: #fff6e5; color: #6b3f00; }
.aviso.listo { background: #e7f6ec; color: #0f5a2c; font-weight: 600; }
.opciones { border: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.opciones legend { padding: 0; margin-bottom: 4px; font-size: .875rem; font-weight: 600; }
.opciones label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.opciones input { width: 18px; height: 18px; margin: 0; accent-color: var(--azul); }

/* Club de Socios: el 20% en una caja gris como las familias de la portada,
   los beneficios como las cajas de "por qué" y los pasos junto al formulario. */
.heroe.club { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
/* El panel azul va igual en todas las maquetas: las pieles (diseno-*.css) cambian
   h1 y .btn en todo el sitio, y sobre azul dejan el título y los botones sin contraste. */
.heroe.club .heroe-txt h1 { margin: 0 0 .5em; font-size: 1.9rem; line-height: 1.2; font-weight: 700; font-style: normal; text-transform: none; text-align: left; color: #fff; }
.heroe.club .heroe-txt .btn { background: var(--naranja); color: var(--sobre-naranja); }
.heroe.club .heroe-txt .btn:hover { background: var(--amarillo); color: var(--sobre-naranja); }
.heroe.club .heroe-txt .btn.wsp, .heroe.club .heroe-txt .btn.wsp:hover { background: #fff; color: var(--wsp); }
.veinte { margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px 26px; border-radius: 12px;
  background: linear-gradient(#f7f7f7, #e3e3e3); border: 1px solid #d3d3d3; border-bottom: 6px solid var(--naranja); }
.veinte b { font-size: clamp(4.5rem, 9vw, 6.75rem); line-height: .85; letter-spacing: -.03em; color: var(--azul); }
.veinte span { font-weight: 600; text-transform: uppercase; color: #3a3a3a; line-height: 1.3; }
.beneficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.beneficios > li { border-top: 4px solid var(--azul); background: var(--gris); padding: 16px 18px; border-radius: 0 0 6px 6px; }
.beneficios > li:nth-child(even) { border-top-color: var(--naranja); }
.ben-dato { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ben-dato b { font-size: 2.25rem; line-height: 1; color: var(--precio); }
.ben-dato span, .lineas span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.beneficios h3 { font-size: 1.0625rem; color: var(--azul); margin-bottom: .35em; }
.beneficios p { margin: 0; font-size: .9rem; color: var(--suave); }
.solo { display: inline-block; vertical-align: middle; padding: 2px 9px; border-radius: 999px; background: var(--naranja); color: var(--sobre-naranja); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.lineas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.lineas li { display: flex; flex-direction: column; background: #fff; border-left: 5px solid var(--naranja); border-radius: 6px; padding: 9px 14px; }
.lineas b { font-size: 1.35rem; color: var(--precio); font-variant-numeric: tabular-nums; }
.aplica th + th, .aplica td { text-align: center; }
.aplica tbody th { font-weight: 600; }
.aplica .si { color: var(--ok); font-weight: 700; }
.aplica .no { color: var(--suave); }
.perfiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; margin: 16px 0 0; font-size: .875rem; }
.perfiles dt { font-weight: 700; color: var(--azul); }
.perfiles div:nth-child(even) dt { color: #c66a00; }
.perfiles dd { margin: 0; color: var(--suave); }
.pasos { counter-reset: paso; margin-bottom: 4px; }
.pasos li { counter-increment: paso; position: relative; min-height: 40px; padding: 0 0 18px 54px; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; font-size: 1.125rem; font-weight: 700; }
.pasos h3 { font-size: 1rem; margin: 0 0 .15em; padding-top: 2px; }
.pasos p { margin: 0; font-size: .9rem; color: var(--suave); }.contacto + .nota { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--borde); }

/* Pie */
.pie { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px 32px; padding: 32px 24px 96px; background: var(--pizarra); color: #dfe5e9; font-size: .875rem; }
.pie h2 { color: #fff; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie li { padding: 2px 0; }
.pie-col:first-child ul { columns: 2; column-gap: 24px; }
.pie-legal { grid-column: 1 / -1; margin: 0; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .2); color: #b9c3ca; font-size: .8125rem; }
.maquinas a { color: #b9c3ca; text-decoration: underline; }
.flota-wsp { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 58px; height: 58px; border-radius: 50%; background: #1fa855; display: grid; place-items: center; box-shadow: 0 6px 18px rgb(0 0 0 / .3); }

@media (max-width: 980px) {
  .hoja { margin-top: 0; border-radius: 0; }
  .franja .ancho > span:first-child { display: none; }
  .franja .ancho { justify-content: center; padding-inline: 16px; }
  .cab { grid-template-columns: auto 1fr; gap: 16px; padding: 20px 16px 16px; }
  .logo { grid-row: 1; }
  .cab-contacto { grid-row: 1; grid-column: 2; justify-content: flex-end; }
  .buscador { grid-column: 1 / -1; max-width: none; }
  .solo-movil { display: block; }
  .pagina { grid-template-columns: minmax(0, 1fr); grid-template-areas: "contenido" "lateral"; padding: 16px 16px 32px; }
  .heroe, .ficha, .contacto { grid-template-columns: minmax(0, 1fr); }
  .pie { grid-template-columns: 1fr 1fr; padding-inline: 16px; }
  .pie-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  h1 { font-size: 1.4rem; }
  .heroe-txt { padding: 20px; }
  .heroe-txt h1 { font-size: 1.5rem; }
  .fono { display: none; }
  .familias a { grid-template-columns: 60px minmax(0, 1fr); padding: 6px; }
  .familias img { width: 60px; height: 60px; }
  .fam-tit { font-size: .8125rem; }
  .fam-txt { font-size: .72rem; }
  .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .prod { padding: 9px; }
  .formulario .mitad { grid-column: 1 / -1; }
  .heroe.club, .beneficios, .perfiles { grid-template-columns: minmax(0, 1fr); }
  .heroe.club .heroe-txt h1 { font-size: 1.5rem; }
  /* La tabla de beneficios, en angosto: cada fila es el beneficio y debajo los tres perfiles. */
  .aplica thead { display: none; }
  .aplica tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
  .aplica tbody th { grid-column: 1 / -1; }
  .aplica tbody th, .aplica td { border: 0; padding: 0; text-align: left; }
  .aplica td::before { content: attr(data-perfil); display: block; font-size: .75rem; font-weight: 400; color: var(--suave); }
  .pie { grid-template-columns: 1fr; }
  .datos b { min-width: 0; display: block; }
  .datos.grande li { padding-left: 0; text-indent: 0; }
  .datos.grande b { width: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .franja, .nav, .lateral, .pie, .flota-wsp, .buscador, .acciones { display: none; } body { background: #fff; } .pagina { display: block; } }

/* Maquetas de diseño (lib/disenos.js). Lo de aqui abajo es comun a todas; cada una
   agrega su hoja public/css/diseno-N.css. */

/* Contacto: telefono fijo, correo y WhatsApp van siempre juntos, cada uno con su
   palabra (la marca no usa iconos). */
.contactos { display: grid; gap: 2px; font-size: .875rem; line-height: 1.4; }
.contactos a { color: var(--texto); font-weight: 600; text-decoration: none; white-space: nowrap; }
.contactos a:hover { text-decoration: underline; }
.c-rot { margin-right: .3em; font-weight: 400; color: var(--suave); }
/* En la franja de arriba, en una linea */
.contactos.en-franja { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 20px; font-size: inherit; }
.contactos.en-franja a { color: #fff; }
.contactos.en-franja .c-rot { color: var(--sobre-azul); }
/* En la cabecera, una bajo otra y con la palabra como rotulo */
.contactos.en-cabecera a { display: grid; grid-template-columns: 78px auto; align-items: baseline; }
.contactos.en-cabecera .c-rot { margin: 0; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; }
.contactos.en-cabecera .c-fono a { font-size: 1.125rem; font-weight: 700; }
.contactos.en-lateral { padding: 0 14px 12px; }
.contactos.en-pie { margin-top: 6px; }
.contactos.en-pie a { color: #fff; }
.contactos.en-pie .c-rot { color: var(--sobre-pizarra-suave); }

/* Logotipo: siempre desde sus archivos, sin agrandarlos (225 px el horizontal, 196 el
   cuadrado) ni bajar de 120 y 58 px. Sobre un color, el horizontal va en placa blanca. */
.logo { display: block; flex: none; }
.logo-cuadrado { width: 76px; height: auto; }
.logo-h { width: 200px; max-width: none; height: auto; }
.placa { display: block; padding: 10px 14px; border-radius: 8px; background: #fff; }
.buscar-lateral { position: relative; padding: 10px; }
.buscar-lateral input { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid #d4d4d4; background: #f0f0f0; }

/* Las familias, de otras maneras: de a tres, o las seis en una fila con la foto arriba. */
.familias.de-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.familias.en-fila { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.familias.en-fila a { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; justify-items: center; align-content: start; text-align: center; row-gap: 4px; padding: 10px 8px; }
.familias.en-fila img { grid-row: auto; }
.heroe.a-lo-ancho { grid-template-columns: minmax(0, 1fr); }

/* La vitrina: lo que va de lado a lado entre las pestañas y el contenido, donde el
   sitio de 2010 tenia sus laminas y sus seis cajas. */
.vitrina { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--borde); }
.vitrina.solo-cajas { grid-template-columns: minmax(0, 1fr); }
/* Solo la maqueta 1: las laminas de 2010, que rotan como en el original. */
.vitrina.de-2010 .familias img { width: 100px; height: 70px; object-fit: cover; }
.vitrina.de-2010 .familias a { grid-template-columns: 100px minmax(0, 1fr); }
.diapos { position: relative; aspect-ratio: 430 / 286; overflow: hidden; border: 1px solid #d4d4d4; background: #fff; }
.diapos a { position: absolute; inset: 0; opacity: 0; visibility: hidden; animation: diapo 30s infinite; }
.diapos a:nth-child(1) { animation-name: diapo-1; }
.diapos a:nth-child(2) { animation-delay: 5s; }
.diapos a:nth-child(3) { animation-delay: 10s; }
.diapos a:nth-child(4) { animation-delay: 15s; }
.diapos a:nth-child(5) { animation-delay: 20s; }
.diapos a:nth-child(6) { animation-delay: 25s; }
.diapos img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes diapo { 0% { opacity: 0; visibility: visible; } 3%, 16.6% { opacity: 1; visibility: visible; } 19.6%, 100% { opacity: 0; visibility: hidden; } }
@keyframes diapo-1 { 0%, 16.6% { opacity: 1; visibility: visible; } 19.6%, 97% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }
.titular { margin-bottom: 28px; }
.titular .sobre { color: var(--naranja-rotulo); }
.titular .bajada { color: var(--suave); max-width: 70ch; }
.avisos2010 a { display: block; margin-bottom: 18px; }
.avisos2010 img { display: block; width: 100%; max-width: 700px; height: auto; }

/* Barra para pasar de una maqueta a otra, e indice /maquetas/ (solo en la direccion de prueba). */
.maquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 16px; background: #14181b; color: #e8ecef; font: 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; }
.maquetas b { color: var(--amarillo); }
.maq-n { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.maq-n a { min-width: 28px; padding: 3px 8px; text-align: center; border-radius: 4px; background: #2a3238; color: #fff; text-decoration: none; }
.maq-n a[aria-current] { background: var(--naranja); color: var(--sobre-naranja); font-weight: 700; }
.maq-n .maq-todas { background: none; text-decoration: underline; }
.lista-maquetas li { margin-bottom: 14px; padding: 16px 18px; border: 1px solid var(--borde); border-radius: var(--r); }
.lista-maquetas .actual { border-color: var(--naranja); box-shadow: 0 0 0 2px var(--naranja); }
.lista-maquetas h2 { margin-bottom: 6px; }
.lista-maquetas h2 span { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 8px; border-radius: 50%; background: var(--azul); color: #fff; font-size: 1rem; }
.lista-maquetas p { margin: 0 0 8px; }

@media (max-width: 980px) {
  .contactos.en-franja { justify-content: center; }
  .logo-cuadrado { width: 58px; }
  .logo-h { width: 170px; }
  .vitrina { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .familias.en-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .contactos { font-size: .75rem; }
  /* Telefono y WhatsApp caben en una linea; el correo baja a la siguiente. */
  .contactos.en-franja { gap: 1px 14px; }
  .contactos.en-franja .c-mail { order: 3; }
  .contactos.en-cabecera .c-fono a { font-size: .9375rem; }
  .logo-h { width: 150px; }
  .familias.de-tres, .familias.en-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitrina.de-2010 .familias a { grid-template-columns: 70px minmax(0, 1fr); }
  .vitrina.de-2010 .familias img { width: 70px; height: 49px; }
}
@media (prefers-reduced-motion: reduce) { .diapos a { animation: none; } .diapos a:first-child { opacity: 1; visibility: visible; } }