/* chk-home-tipos-20261009c.css (v c: botón de redes en LIMA; v b: «Trabajemos juntos» en coral; foto de clase oculta en Redes) · base: chk-home-tipos-20261009-coral.css · Inicio (index.html raíz) · sistema tipográfico «S5 Beth Ellen» (aprobado 2026-10-08/09)
   Necesita /wp-content/uploads/chk/fonts/chk-fuentes.css (Big Shoulders, Martian Mono, Beth Ellen).
   Big Shoulders = títulos (mayúsculas) · Martian Mono = etiquetas/botones/pie · Beth Ellen = «chak» decorativo (coral #ff8566, aceptado como decorativo)
   DM Sans se queda en párrafos. Menús sin cambios. Solo colores de marca. Esquinas 2px. Sin subrayados.
   Archivo independiente: NO depende de chk-tipos-s5-v3-coral.css (ese es para Sobre mí). */
:root{--s5-blue:#193cff;--s5-navy:#0b1a7a;--s5-off:#f9f9f9;--s5-coral:#ff8566;--s5-lime:#d6ff3a;
  --s5-title:"Big Shoulders","Arial Narrow",sans-serif;--s5-mono:"Martian Mono",ui-monospace,monospace;--s5-script:"Beth Ellen",cursive}
.s5-script{font-family:var(--s5-script);font-weight:400;text-transform:lowercase;-webkit-text-stroke:0;text-shadow:none;letter-spacing:0}

/* ---------- Hero ---------- */
.open-type--afiche .s5-hola{display:block;margin:0 0 .3em;font-size:clamp(5.2rem,9vw,8.4rem);line-height:.8;transform:rotate(-5deg);pointer-events:none;color:var(--s5-coral)}
.open-type--afiche h1.enc-title{font-family:var(--s5-title);font-weight:900;font-optical-sizing:auto;text-transform:uppercase;
  font-size:clamp(3.4rem,8.4vw,7.6rem);line-height:.86;letter-spacing:0;color:var(--s5-lime)}
.open-type--afiche #hero-lede{font:600 clamp(.8rem,1.1vw,.95rem)/1.2 var(--s5-mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--s5-off)}
html body.is-ready .open-type #hero-lede{opacity:1!important} /* antes 90%: quedaba justo en 4.5:1 */

/* ---------- Botones (Martian Mono) ---------- */
.open-type .cta-hero a.cta-talk,.fan-actions a,.blog-btn{font-family:var(--s5-mono)!important;font-weight:600!important;font-stretch:87.5%;letter-spacing:.06em!important;text-transform:uppercase;font-size:.82rem!important;border-radius:2px!important}

/* ---------- Portafolio ---------- */
.svc-row-label{font-family:var(--s5-title);font-weight:900;text-transform:uppercase;font-size:clamp(3.6rem,8vw,6.4rem);line-height:.86;letter-spacing:0;color:var(--s5-lime)}
.svc-row-lede{width:fit-content;max-width:min(28rem,100%);margin-inline:auto!important;padding:9px 14px;background:var(--s5-navy);border-radius:2px;color:var(--s5-off);font-family:var(--s5-mono);font-stretch:87.5%;font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;opacity:1} /* franja navy: sobre el azul con grano no llegaba a 4.5:1 en iPhone */
.ficha{border-radius:2px}
.ficha-n{font-family:var(--s5-mono);font-weight:500;font-size:.85rem;letter-spacing:.06em;opacity:1;color:var(--s5-navy)}
.ficha-title{font-family:var(--s5-title);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,2.4vw,2.1rem);line-height:.92;letter-spacing:.01em;text-decoration:none!important;color:var(--s5-blue)}

/* ---------- Redes: foto en trama + polaroid «EN CLASE» + franja ---------- */
.s5-aula{position:relative;margin:0 auto;width:min(100%,560px);aspect-ratio:1363/1069;background:var(--s5-navy);border-radius:2px;overflow:visible}
.s5-aula>img.s5-trama{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}
.s5-pola{position:absolute;right:-14px;top:-18px;margin:0;width:112px;padding:7px 7px 0;background:var(--s5-off);border-radius:2px;transform:rotate(4deg);z-index:2}
.s5-pola img{display:block;width:98px;height:150px;object-fit:cover;object-position:50% 22%;border-radius:1px}
.s5-pola figcaption{display:block;text-align:center;padding:8px 0 9px;font:500 10px/1 var(--s5-mono);font-stretch:87.5%;letter-spacing:.14em;color:var(--s5-navy);text-transform:uppercase}
.s5-aula .s5-strip{position:absolute;left:0;right:0;bottom:0;margin:0;padding:12px 10px 13px;background:var(--s5-navy);color:var(--s5-off);text-align:center;font:500 12px/1.2 var(--s5-mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border-radius:0 0 2px 2px}
.fan-sec .s5-aula{margin-bottom:150px}            /* aire para el arco del abanico al abrirse (no tapa la foto) */

/* ---------- Blog y pie ---------- */
.blog-teaser-line{font-family:var(--s5-title);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,3.2vw,2.8rem);line-height:.95;letter-spacing:.01em;max-width:34rem!important}
.foot-inline{font-family:var(--s5-mono);font-stretch:87.5%;font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--s5-off);opacity:1} /* antes 55% de opacidad: no llegaba a 4.5:1 */

@media (max-width:700px){
  .open-type--afiche .s5-hola{font-size:5.4rem}
  .open-type--afiche h1.enc-title{font-size:clamp(2.7rem,12.6vw,3.6rem)}
  .svc-row-label{font-size:4.2rem}
  .s5-aula{width:min(100% - 28px,420px)}
  .fan-sec .s5-aula{margin-bottom:140px}
  .s5-pola{width:92px;right:-8px;top:-16px;padding:6px 6px 0}.s5-pola img{width:80px;height:122px}.s5-pola figcaption{font-size:9px}
  .s5-aula .s5-strip{font-size:10.5px}
}

/* ---------- Efectos de scroll ----------
   v b: la foto de clase está oculta, así que el abanico y los botones vuelven al centro de Redes y
   el escalonado usa otra vez los rangos originales de chk-home-efectos-20261009.css (sin override aquí).
   Si algún día se vuelve a mostrar la foto, recuperar el bloque «view() propio» de chk-home-tipos-20261009-coral.css. */

/* ---------- v b (20261009): «Trabajemos juntos» en CORAL (hero y Redes) ----------
   Reposo: fondo coral #ff8566 + texto navy #0b1a7a (6.1:1). Hover (mouse) y foco: fondo navy + texto coral
   (6.1:1) con filo coral; el foco además lleva el anillo hueso de siempre. En iPhone el :hover se queda pegado
   tras el toque, por eso ahí se ve igual que en reposo. Esquinas 2px, sin subrayado. */
html body .open-type .cta-hero a.cta-talk,
html body .fan-actions a.fan-act-main,
html body .open-type .cta-hero a.cta-talk:hover,
html body .fan-actions a.fan-act-main:hover {
  background: #ff8566 !important; color: #0b1a7a !important; border: none !important; border-radius: 2px !important;
  box-shadow: inset 0 0 0 1.9px #ff8566, 0 8px 22px rgba(8,0,40,0.28) !important; text-decoration: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .open-type .cta-hero a.cta-talk:hover,
  html body .fan-actions a.fan-act-main:hover {
    background: #0b1a7a !important; color: #ff8566 !important; box-shadow: inset 0 0 0 1.9px #ff8566 !important;
  }
}
html body .open-type .cta-hero a.cta-talk:focus-visible,
html body .fan-actions a.fan-act-main:focus-visible {
  background: #0b1a7a !important; color: #ff8566 !important; box-shadow: inset 0 0 0 1.9px #ff8566 !important;
  outline: 3px solid #f9f9f9 !important; outline-offset: 3px; border-radius: 2px !important; text-decoration: none !important;
}

/* ---------- v c (20261009): botón de Redes (abanico) en LIMA ----------
   Cerrado: fondo lima #d6ff3a + ícono navy #0b1a7a (12.6:1). Sigue siendo CÍRCULO (sólo cambian los colores; antes coral).
   Hover (mouse) y foco: fondo navy + ícono lima con filo lima (12.6:1); el foco además lleva el anillo hueso.
   Abierto (X): fondo navy + X lima con filo lima, para que se lea como «cerrar».
   En iPhone el :hover se queda pegado tras el toque: ahí se ve igual que en reposo.
   Los íconos de cada red siguen siendo círculos hueso como antes. */
html body .fan-sec .fan-trigger,
html body .fan-sec .fan-trigger:hover {
  background: #d6ff3a !important; color: #0b1a7a !important;
  box-shadow: inset 0 0 0 1.9px #d6ff3a, 0 8px 22px rgba(8,0,40,0.28) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .fan-sec .social-fan:not(.is-open) .fan-trigger:hover {
    background: #0b1a7a !important; color: #d6ff3a !important; box-shadow: inset 0 0 0 1.9px #d6ff3a !important;
  }
}
html body .fan-sec .social-fan:not(.is-open) .fan-trigger:focus-visible {
  background: #0b1a7a !important; color: #d6ff3a !important; box-shadow: inset 0 0 0 1.9px #d6ff3a !important;
  outline: 3px solid #f9f9f9 !important; outline-offset: 3px;
}
html body .fan-sec .social-fan.is-open .fan-trigger,
html body .fan-sec .social-fan.is-open .fan-trigger:hover,
html body .fan-sec .social-fan.is-open .fan-trigger:focus-visible {
  background: #0b1a7a !important; color: #d6ff3a !important; box-shadow: inset 0 0 0 1.9px #d6ff3a, 0 8px 22px rgba(8,0,40,0.28) !important;
}
html body .fan-sec .social-fan.is-open .fan-trigger:focus-visible { outline: 3px solid #f9f9f9 !important; outline-offset: 3px; }

/* v-d (rendimiento de scroll): el fondo cuadriculado del body era background-attachment:fixed.
   Eso obliga a Chrome/Safari a desplazar en el hilo principal y a repintar toda la pantalla
   (más el grano con soft-light encima) en cada cuadro. Ese fondo queda tapado por el menú y
   el .mat-veil (y sus líneas son del mismo color que el papel), así que en "scroll" se ve igual.
   En ≤860px ya era así. */
html body{background-attachment:scroll}