:root{
  --so-rojo:#e4163a;        /* solo fondo o borde */
  --so-rojo-vivo:#ff5f76;   /* solo hover */
  --so-negro:#0d0d0d;
  --so-crema:#f3e6cf;
  --so-crema-2:#fbf4e8;
  --so-marron:#2a1414;
  --so-gris:#a7a7a7;
  --radio:4px;
  --ancho:1180px;
}
:where(.so-lienzo) *{box-sizing:border-box;margin:0;padding:0}
html:has(.so-lienzo){scroll-behavior:smooth}
body.so-lienzo{
  margin:0;
  font-family:"Barlow",system-ui,sans-serif;
  color:var(--so-negro);
  line-height:1.55;
  /* Fondo: bandera rojinegra en diagonal */
  background-color:var(--so-negro);
  background-image:linear-gradient(to bottom right, var(--so-rojo) 0 50%, var(--so-negro) 50% 100%);
  background-attachment:fixed;
  background-size:100% 100vh;
  min-height:100vh;
}
:where(.so-lienzo) img{max-width:100%;display:block}
:where(.so-lienzo) a{color:inherit}
.contenedor{width:min(var(--ancho),100% - 32px);margin-inline:auto}
:where(.so-lienzo) :is(h1,h2,h3){font-family:"Anton",Impact,sans-serif;font-weight:400;letter-spacing:.02em;text-transform:uppercase;line-height:1.05}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:50;background:var(--so-negro);border-bottom:4px solid var(--so-rojo)}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--so-crema)}
.marca img{height:54px;width:auto}
.marca span{font-family:"Anton",sans-serif;font-size:1.3rem;text-transform:uppercase}
.menu{display:flex;gap:4px;list-style:none;flex-wrap:wrap}
.menu a{display:block;padding:10px 14px;color:var(--so-crema);text-decoration:none;font-weight:600;border-radius:var(--radio)}
.menu a:hover{background:var(--so-rojo-vivo);color:var(--so-negro)}
.btn-menu{display:none;background:none;border:2px solid var(--so-crema);color:var(--so-crema);font-size:1.4rem;padding:4px 12px;border-radius:var(--radio);cursor:pointer}
@media (max-width:860px){
  .btn-menu{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--so-negro);flex-direction:column;padding:8px 16px 16px;border-bottom:4px solid var(--so-rojo)}
  .menu.abierto{display:flex}
  .marca span{display:none}
}


/* Logo fijo a caballo entre cabecera y cuerpo */
.logo-fijo{position:fixed;top:12px;left:20px;z-index:60;display:block;border-radius:50%;box-shadow:6px 6px 0 rgba(0,0,0,.45);transition:transform .15s}
.logo-fijo img{width:130px;height:130px;object-fit:cover;border-radius:50%;border:4px solid var(--so-crema);background:var(--so-negro)}
.logo-fijo:hover{transform:scale(1.05)}
.marca{padding-left:max(0px,calc(165px - (100vw - min(var(--ancho),100vw - 32px))/2))}
@media (max-width:860px){.logo-fijo{top:8px;left:12px}.logo-fijo img{width:84px;height:84px}.marca{padding-left:96px}.marca span{display:inline;font-size:1rem}}


/* Letrero de noticias */
.ticker{display:flex;align-items:stretch;background:var(--so-rojo);color:#fff;border-top:2px solid var(--so-negro);overflow:hidden}
.tk-etiqueta{flex:none;background:var(--so-negro);color:var(--so-crema);font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:8px 18px 8px 172px;display:flex;align-items:center}
.tk-ventana{flex:1;overflow:hidden;display:flex;align-items:center}
.tk-cinta{display:flex;white-space:nowrap;animation:tk-desliza 45s linear infinite;will-change:transform}
.tk-copia{display:flex}
.ticker:hover .tk-cinta{animation-play-state:paused}
.tk-item{padding:8px 48px 8px 0;font-weight:600}
.tk-estrella{font-style:normal;margin-right:12px;color:var(--so-negro)}
@keyframes tk-desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tk-cinta{animation:none;white-space:normal;flex-direction:column}.tk-copia{display:none}}
@media (max-width:860px){.tk-etiqueta{padding-left:106px}}

/* ---------- Portada ---------- */
.portada{padding:28px 0 0}
.cabezal{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--so-negro);color:var(--so-crema);padding:28px 32px;border-left:12px solid var(--so-rojo);box-shadow:12px 12px 0 rgba(0,0,0,.35)}
.cabezal h1{font-size:clamp(3.4rem,11vw,9rem);line-height:.9}
.fecha{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--so-crema);color:var(--so-negro);padding:10px 26px 16px;border:6px solid var(--so-rojo);transform:rotate(-3deg);min-width:clamp(150px,26vw,300px)}
.fecha-dia{font-family:"Anton",sans-serif;font-size:clamp(5rem,15vw,12rem);line-height:.9}
.fecha-mes{font-family:"Anton",sans-serif;font-size:clamp(1.3rem,3.6vw,2.8rem);text-transform:uppercase;background:var(--so-rojo);color:#fff;padding:2px 14px;margin-top:6px;letter-spacing:.04em}
.franja{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--so-crema);padding:16px 24px;box-shadow:12px 12px 0 rgba(0,0,0,.35)}
.franja p{font-weight:800;font-size:clamp(1.05rem,2.2vw,1.4rem);color:var(--so-rojo)}
.cuenta{display:flex;gap:10px}
.cuenta div{background:var(--so-negro);color:var(--so-crema);text-align:center;padding:8px 12px;min-width:70px;border-bottom:5px solid var(--so-rojo)}
.cuenta b{display:block;font-family:"Anton",sans-serif;font-weight:400;font-size:1.8rem;line-height:1}
.cuenta small{text-transform:uppercase;font-weight:800;font-size:.72rem}
@media (max-width:640px){.cabezal{flex-direction:column;align-items:flex-start;padding:22px}.fecha{flex-direction:row;gap:14px}.fecha-mes{margin-top:0}}

/* ---------- Filas a dos columnas ---------- */
.fila{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.fila-portada{align-items:start}
.fila-portada .cartel{align-self:start}
section[id],footer[id],.info[id]{scroll-margin-top:130px}
.fila-par{grid-template-columns:1fr 1fr;align-items:start}
.col-texto{display:flex;flex-direction:column;gap:0}
.fecha-grande{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:20px;background:var(--so-crema);color:var(--so-negro);border:8px solid var(--so-rojo);padding:4px 28px 10px;box-shadow:12px 12px 0 rgba(0,0,0,.35);transform:rotate(-2deg);position:relative;z-index:2}
.fecha-grande .fecha-dia{font-family:"Anton",sans-serif;font-size:clamp(7rem,16vw,13rem);line-height:.95}
.fecha-grande .fecha-mes{font-family:"Anton",sans-serif;font-size:clamp(1.8rem,4.6vw,3.6rem);text-transform:uppercase;background:var(--so-rojo);color:#fff;padding:4px 18px;letter-spacing:.03em}
.bloque-info{background:var(--so-negro);color:var(--so-crema);border-left:10px solid var(--so-rojo);padding:30px 28px 26px;margin:-6px 10px 0;box-shadow:12px 12px 0 rgba(0,0,0,.35)}
.bloque-info h1{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:12px}
.reclamaciones{list-style:none;display:grid;gap:8px;margin-bottom:18px}
.reclamaciones li{padding-left:18px;position:relative;font-size:1rem}
.reclamaciones li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--so-rojo)}
.queda{text-transform:uppercase;font-weight:800;font-size:.8rem;letter-spacing:.08em;margin-bottom:6px;color:var(--so-gris)}
.bloque-info .cuenta div{background:var(--so-crema);color:var(--so-negro)}
@media (max-width:640px){.fecha-grande{padding:4px 16px 8px}.bloque-info{margin:-6px 0 0;padding:24px 20px}}
.cartel img{width:100%;border:6px solid var(--so-crema);box-shadow:10px 10px 0 rgba(0,0,0,.45);cursor:zoom-in;transition:transform .15s}
.cartel img:hover{transform:scale(1.02)}
.derechos-texto{background:var(--so-crema);padding:28px;box-shadow:10px 10px 0 rgba(0,0,0,.35)}
.derechos-texto ul{margin:14px 0 0 1.2em;display:grid;gap:10px;font-size:1.05rem}
.pista{margin-top:16px;font-size:.9rem;font-weight:600}
.fila-portada{align-items:start}
.fila-portada .cartel{align-self:start}
section[id],footer[id],.info[id]{scroll-margin-top:130px}
@media (max-width:860px){.fila,.fila-par{grid-template-columns:1fr}}

/* Filas en zig-zag */
.fila-zz{grid-template-columns:1fr 1fr;align-items:stretch;gap:40px}
.fila-zz .cartel{align-self:start}
.fila-zz .info{display:flex;flex-direction:column}
.fila-zz .info .remate{margin-top:auto;padding-top:14px}
.info{padding:32px 30px;box-shadow:12px 12px 0 rgba(0,0,0,.35)}
.info-crema{background:var(--so-crema);color:var(--so-negro);border-top:8px solid var(--so-rojo)}
.info-oscura{background:var(--so-negro);color:var(--so-crema);border-left:10px solid var(--so-rojo)}
.antetitulo{display:inline-block;background:var(--so-rojo);color:#fff;font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;padding:3px 10px;margin-bottom:12px}
.info h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:16px}
.lista{list-style:none;display:grid;gap:10px}
.lista li{position:relative;padding-left:20px;font-size:1.06rem}
.lista li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--so-rojo)}
.caja-ancha{border-left:none;border-top:8px solid var(--so-rojo)}
.lista-2col{grid-template-columns:1fr 1fr;column-gap:36px}
@media (max-width:860px){.lista-2col{grid-template-columns:1fr}}
.recuadro{margin-top:20px;border:3px solid var(--so-negro);padding:16px 18px;background:var(--so-crema-2)}
.recuadro h3{font-size:1.35rem;margin-bottom:8px}
.recuadro ol{margin-left:1.3em;display:grid;gap:5px;font-size:.98rem}
.recuadro .lista li{font-size:.98rem}
.recuadro .lista{gap:7px}
.recuadro-oscuro{background:#151515;border-color:var(--so-rojo)}
.memoria{margin-top:20px;border-left:6px solid var(--so-negro);background:var(--so-crema-2);padding:12px 16px}
.memoria h3{font-size:1.3rem;margin-bottom:4px}
.remate{margin-bottom:0}
.info-crema .remate{border-top-color:#d6c6aa}
.remate{margin-top:18px;font-weight:800;font-size:1.1rem;border-top:2px solid #333;padding-top:14px}
@media (max-width:860px){.fila-zz{grid-template-columns:1fr}.fila-zz .cartel{order:-1}}

.btn{display:inline-block;padding:14px 22px;font-weight:800;text-transform:uppercase;text-decoration:none;border-radius:var(--radio);border:3px solid var(--so-rojo);transition:background .15s,color .15s,border-color .15s}
.btn-rojo{background:var(--so-rojo);color:#fff}
.btn:hover{background:var(--so-rojo-vivo);border-color:var(--so-rojo-vivo);color:var(--so-negro)}

/* ---------- Secciones ---------- */
.seccion{padding:48px 0}
.panel{background:var(--so-crema);padding:40px;box-shadow:12px 12px 0 rgba(0,0,0,.35)}
.panel-oscuro{background:var(--so-negro);color:var(--so-crema);border-top:8px solid var(--so-rojo)}
.titulo-seccion{font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:8px}
.titulo-seccion .rojo{color:var(--so-rojo)}           /* rojo como texto solo sobre fondo claro */
.subtitulo{font-size:1.1rem;max-width:70ch;margin-bottom:28px}
@media (max-width:600px){.panel{padding:22px}}

/* Guías */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tarjeta{position:relative;background:var(--so-crema-2);border:3px solid var(--so-negro);padding:22px 20px 20px;text-decoration:none;color:var(--so-negro);display:flex;flex-direction:column;gap:8px;transition:transform .15s,box-shadow .15s}
.tarjeta:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--so-rojo-vivo)}
.tarjeta .num{font-family:"Anton",sans-serif;font-size:2.4rem;line-height:1;color:var(--so-rojo)}
.tarjeta h3{font-size:1.45rem}
.tarjeta p{font-size:.98rem;flex:1}
.estado{align-self:flex-start;font-size:.75rem;font-weight:800;text-transform:uppercase;background:var(--so-negro);color:var(--so-crema);padding:3px 8px}

/* Afiliación */
.afiliacion{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.afiliacion ul{margin:14px 0 22px 1.2em}
.afiliacion li{margin-bottom:6px}
.afiliacion .logo-grande{max-width:320px;margin-inline:auto;filter:drop-shadow(8px 8px 0 rgba(0,0,0,.25))}
@media (max-width:860px){.afiliacion{grid-template-columns:1fr}}

/* Visor de imágenes */
.visor{position:fixed;inset:0;background:rgba(0,0,0,.94);display:none;z-index:100;overflow:hidden;touch-action:none}
.visor.abierto{display:block}
.visor-lienzo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:grab}
.visor-lienzo.arrastrando{cursor:grabbing}
.visor-lienzo img{max-height:92vh;max-width:96vw;width:auto;border:4px solid var(--so-crema);transform-origin:0 0;user-select:none;will-change:transform}
.visor-botones{position:absolute;top:14px;right:14px;display:flex;gap:8px;z-index:2}
.visor-botones button{width:46px;height:46px;font-size:1.4rem;font-weight:800;background:var(--so-negro);color:var(--so-crema);border:2px solid var(--so-crema);border-radius:var(--radio);cursor:pointer}
.visor-botones button:hover{background:var(--so-rojo-vivo);color:var(--so-negro);border-color:var(--so-rojo-vivo)}
.visor-ayuda{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:var(--so-gris);font-size:.85rem;pointer-events:none}

/* Pie */
.pie{background:var(--so-negro);color:var(--so-crema);border-top:6px solid var(--so-rojo);padding:32px 0;margin-top:48px}
.pie .contenedor{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.pie img{height:70px;width:auto}
.pie a{text-decoration:none;font-weight:600}
.pie a:hover{color:var(--so-rojo-vivo)}
.pie-rejilla{display:grid!important;grid-template-columns:auto 1.3fr 1fr auto;gap:32px;align-items:center}
.pie .pie-logo{height:110px;width:110px;object-fit:cover;border-radius:50%}
.pie-logo-soli img{height:120px;width:auto}
@media (max-width:860px){.pie-rejilla{grid-template-columns:1fr 1fr;justify-items:center;text-align:center}.pie-datos,.pie-legal{margin-top:10px;font-weight:600}
.pie-legal a{color:var(--so-crema)}
.aviso{grid-column:1/-1}.pie-logo-soli{order:-1}}
.pie-datos{display:grid;gap:4px}
.pie-web{font-family:"Anton",sans-serif;font-size:clamp(2rem,5vw,3.4rem);line-height:1;text-transform:uppercase}
.pie-soli{font-size:1.15rem}
.pie-mail{font-size:1rem;color:var(--so-gris)}
.aviso{font-size:.85rem;color:var(--so-gris);max-width:60ch}

/* Barra de administración de WordPress */
.admin-bar .cabecera{top:32px}
.admin-bar .logo-fijo{top:44px}
@media (max-width:782px){.admin-bar .cabecera{top:46px}.admin-bar .logo-fijo{top:54px}}
@media (max-width:600px){.admin-bar .cabecera{top:0}}
.tk-grupo,.tk-copia{display:flex}

/* ---------- Páginas interiores ---------- */
.caja-pagina{width:min(860px,100%);margin:40px auto;background:var(--so-crema);padding:40px;border-top:8px solid var(--so-rojo);box-shadow:12px 12px 0 rgba(0,0,0,.35);line-height:1.6}
.caja-pagina h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:6px}
.caja-pagina h2{font-size:1.45rem;margin:30px 0 10px;padding-top:14px;border-top:2px solid #d6c6aa}
.caja-pagina p,.caja-pagina li{margin-bottom:10px}
.caja-pagina ul,.caja-pagina ol{margin-left:1.3em}
.caja-pagina .actualizado{color:#555;font-size:.9rem;margin-bottom:20px}
.caja-pagina table{width:100%;border-collapse:collapse;margin:8px 0 14px;background:var(--so-crema-2)}
.caja-pagina td,.caja-pagina th{border:1px solid #cdbb9c;padding:8px 10px;text-align:left;vertical-align:top}
.caja-pagina th{width:32%;background:#efdfc2}
.caja-pagina .pend{background:#ffe08a;padding:0 4px;font-weight:600}
.caja-pagina .intro{font-size:1.08rem}
@media (max-width:600px){.caja-pagina{padding:22px;margin:24px auto}}

/* ---------- Formularios (los usan so-afiliacion y so-contacto) ---------- */
.so-form{display:grid;gap:18px;margin-top:20px}
.so-form .campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.so-form .campo{display:flex;flex-direction:column;gap:6px}
.so-form .campo.ancho{grid-column:1/-1}
.so-form label{font-weight:800;font-size:.95rem}
.so-form label .opc{font-weight:400;color:#666}
.so-form input[type=text],.so-form input[type=email],.so-form input[type=tel],.so-form select,.so-form textarea{font:inherit;padding:11px 12px;border:2px solid var(--so-negro);border-radius:4px;background:#fff;color:var(--so-negro);width:100%}
.so-form textarea{min-height:140px;resize:vertical}
.so-form input:focus,.so-form select:focus,.so-form textarea:focus{outline:3px solid var(--so-rojo);outline-offset:1px}
.so-form fieldset{border:2px solid #cdbb9c;padding:12px 16px;border-radius:4px}
.so-form legend{font-weight:800;padding:0 6px}
.so-form .opciones{display:flex;flex-wrap:wrap;gap:8px 20px}
.so-form .opciones label,.so-form .check label{font-weight:400}
.so-form .check{display:flex;gap:10px;align-items:flex-start}
.so-form .check input{margin-top:5px;width:18px;height:18px;accent-color:var(--so-rojo);flex:none}
.so-form .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.so-form .nota,.caja-pagina .nota{font-size:.88rem;color:#555}
.so-boton{justify-self:start;display:inline-block;font:inherit;font-weight:800;text-transform:uppercase;text-decoration:none;padding:14px 26px;background:var(--so-rojo);color:#fff;border:3px solid var(--so-rojo);border-radius:4px;cursor:pointer}
.so-boton:hover{background:var(--so-rojo-vivo);border-color:var(--so-rojo-vivo);color:var(--so-negro)}
.so-boton-sec{background:transparent;color:var(--so-negro);border-color:var(--so-negro)}
.aviso-envio{padding:14px 16px;border-radius:4px;font-weight:600;margin-top:16px}
.aviso-envio.ok{background:#d9f2d9;border:2px solid #2e7d32}
.aviso-envio.error{background:#fde2e4;border:2px solid var(--so-rojo)}
@media (max-width:600px){.so-form .campos{grid-template-columns:1fr}}

/* Móvil estrecho (≤ 480 px): la zona 1 cabe sin salirse de la pantalla.
   1) Las columnas de las filas pueden estrecharse por debajo de su contenido.
   2) La fecha grande escala con el ancho de la pantalla en vez de tener mínimos fijos. */
.fila>*,.fila-portada>*,.col-texto,.bloque-info,.afiliacion>*{min-width:0}
.afiliacion .logo-grande{width:100%;height:auto}
.fecha-grande,.bloque-info{max-width:100%;box-sizing:border-box}
@media (max-width:480px){
  .fecha-grande{gap:10px;padding:4px 12px 8px;border-width:6px;box-shadow:8px 8px 0 rgba(0,0,0,.35)}
  .fecha-grande .fecha-dia{font-size:clamp(4.2rem,24vw,7rem)}
  .fecha-grande .fecha-mes{font-size:clamp(1.05rem,6.2vw,1.8rem);padding:3px 10px}
  .bloque-info{padding:22px 16px;box-shadow:8px 8px 0 rgba(0,0,0,.35)}
  .bloque-info h1{overflow-wrap:anywhere}
  .cuenta{gap:6px}
  .cuenta div{min-width:0;flex:1;padding:8px 6px}
}

/* Móvil: letrero de noticias con sitio para el texto.
   El logo fijo baja a 64 px y la cabecera reserva su altura, así que ya no pisa el letrero
   y la etiqueta «Noticias» no necesita el margen de 106 px. */
@media (max-width:860px){
  .logo-fijo{top:6px;left:10px}
  .logo-fijo img{width:64px;height:64px;border-width:3px}
  .cabecera .contenedor{min-height:76px}
  .marca{padding-left:74px}
  .tk-etiqueta{padding:6px 10px;font-size:.85rem;letter-spacing:.04em}
  .tk-item{padding:6px 36px 6px 0}
}