/* Se carga después de css/base.css (generado desde el template de Claude Design) */

/* Valores que cambian entre desktop y mobile (antes los calculaba React) */
:root {
  --bento-cols: repeat(4, minmax(0, 1fr));
  --span2: span 2;
  --f-align: flex-start;
  --f-ta: left;
  --reel-w: clamp(260px, 22vw, 320px);
  --reel-half: clamp(130px, 11vw, 160px);
  --case-h: 220vh;
  --case-pos: sticky;
  --case-inner-h: 100dvh;
}
@media (max-width: 1023px) {
  :root {
    --bento-cols: minmax(0, 1fr);
    --span2: span 1;
    --f-align: center;
    --f-ta: center;
    --reel-w: min(72vw, 280px);
    --reel-half: min(36vw, 140px);
    --case-h: auto;
    --case-pos: relative;
    --case-inner-h: 0;
  }
}

/* Navegación: animación de letras en hover/foco */
[data-nl] { --t1: translateY(0); --t2: translateY(110%); }
[data-nl]:hover, [data-nl]:focus-visible { --t1: translateY(-110%); --t2: translateY(0); }

/* Menú mobile */
[data-menu][hidden] { display: none !important; }
body.menu-open { overflow: hidden; }

/* Carrusel de reels: tarjeta activa */
[data-reel-track]::-webkit-scrollbar { display: none; }
[data-reel] { --clip: inset(15% 0% 15% 0% round 28px); --sc: 1.08; --op: 0; --btn: 0.6; --blur: blur(10px); }
[data-reel].is-active { --clip: inset(0% 0% 0% 0% round 28px); --sc: 1; --op: 1; --btn: 1; --blur: blur(0px); }
[data-reel-dot][aria-selected="true"] span { width: 28px !important; background: #0A0A0A !important; }

/* Testimonios: pestañas */
[data-slide-tab][aria-pressed="true"] { background: #FFEE00 !important; color: #0A0A0A !important; }

/* Formulario: estado con error */
[data-contact-form] [aria-invalid="true"] { border-color: #992819 !important; }

/* Íconos originales de las redes */
.soc { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; transition: transform 200ms ease, box-shadow 200ms ease; }
.soc svg { width: 22px; height: 22px; fill: currentColor; }
.soc-wa { background: #25D366; }
.soc-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.soc-tt { background: #000; border: 1.5px solid #333; }
.soc-tt svg { filter: drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55); }
.soc-yt { background: #FF0000; }
.soc-kick { background: #53FC19; color: #0A0A0A; }
.soc-mail { background: #fff; color: #EA4335; }
.soc-sm { width: 24px; height: 24px; }
.soc-sm svg { width: 13px; height: 13px; }
.soc-lg { width: 64px; height: 64px; }
.soc-lg svg { width: 30px; height: 30px; }
@media (hover: hover) { a.soc:hover { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(255,255,255,.18); } }

/* Métricas: redes */
.net-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 8px; border-radius: 999px; background: #1F1F1F; font-size: 14px; color: #fff; transition: background 200ms ease; }
.net-pill strong { font-weight: 500; color: #999; font-size: 13px; }
@media (hover: hover) { .net-pill:hover { background: #2a2a2a; } }

/* Encontrá más contenido: pestañas por red */
.net-tab { height: 54px; display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; border-radius: 999px; border: 2px solid #0A0A0A; background: transparent; color: #0A0A0A; font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 16px; cursor: pointer; transition: background 200ms ease, color 200ms ease; }
.net-tab svg { width: 20px; height: 20px; fill: currentColor; }
.net-tab[aria-selected="true"] { background: #0A0A0A; color: #FFEE86; }
@media (hover: hover) { .net-tab:hover { background: #0A0A0A; color: #FFEE86; } }
.vid-panel { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.vid-panel[hidden] { display: none; }
.vid-grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.vid-card { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #0A0A0A; border: 3px solid #0A0A0A; }
.vid-card > img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.23,1,0.32,1); }
.vid-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,0) 45%); pointer-events: none; }
.vid-views { position: absolute; top: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #FFEE00; color: #0A0A0A; font-size: 13px; font-weight: 600; }
.vid-play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #FFEE00; color: #0A0A0A; display: flex; align-items: center; justify-content: center; font-size: 24px; border: 3px solid #0A0A0A; transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1); }
.vid-title { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; color: #fff; font-family: 'General Sans', sans-serif; font-weight: 600; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; }
@media (hover: hover) { a.vid-card:hover > img { transform: scale(1.05); } a.vid-card:hover .vid-play { transform: scale(1.12); } }
.vid-embed { background: #fff; aspect-ratio: auto; min-height: 560px; }
.vid-embed::after { display: none; }
.vid-embed iframe { width: 100%; height: 100%; min-height: 560px; border: 0; display: block; }
.vid-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-weight: 600; color: #0A0A0A; }
.vid-more { height: 50px; display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; border-radius: 999px; border: 2px solid #0A0A0A; font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 15px; transition: background 200ms ease, color 200ms ease; }
@media (hover: hover) { .vid-more:hover { background: #0A0A0A; color: #FFEE86; } }
.tt-cta { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 28px; background: #0A0A0A; color: #fff; font-size: 16px; }
.tt-cta strong { display: block; font-family: 'General Sans', sans-serif; font-size: 24px; color: #FFEE00; }
.tt-cta > i { font-size: 22px; margin-left: 12px; }
@media (max-width: 1023px) {
  [role="tablist"] { flex-wrap: nowrap !important; gap: 6px !important; }
  .net-tab { height: 46px; padding: 0 14px; gap: 7px; font-size: 15px; }
  .net-tab svg { width: 17px; height: 17px; }
  .vid-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(72vw, 280px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .vid-grid > * { scroll-snap-align: center; }
  .vid-grid::-webkit-scrollbar { display: none; }
}

/* Qué ofrezco */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.svc-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 30px); border-radius: 28px; background: #fff; border: 3px solid #0A0A0A; box-shadow: 6px 6px 0 #0A0A0A; transition: transform 200ms ease, box-shadow 200ms ease; }
.svc-card h3 { margin: 0; font-family: 'General Sans', sans-serif; font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.05; letter-spacing: -0.02em; }
.svc-card p { margin: 0; font-size: 15px; line-height: 1.5; color: #333; }
.svc-ic { width: 54px; height: 54px; border-radius: 50%; background: #0A0A0A; color: #FFEE00; display: flex; align-items: center; justify-content: center; font-size: 26px; }
@media (hover: hover) { .svc-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 #0A0A0A; } }
.svc-cta { height: 56px; display: inline-flex; align-items: center; gap: 10px; padding: 0 24px; border-radius: 999px; background: #0A0A0A; color: #FFEE00; font-family: 'General Sans', sans-serif; font-weight: 700; font-size: 17px; }
.svc-cta i { font-size: 22px; }

/* Marcas principales */
.brand-tops { list-style: none; margin: 0 auto clamp(28px, 4vw, 44px); padding: 0 clamp(16px, 4vw, 48px); max-width: 1280px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.brand-top { height: clamp(120px, 12vw, 170px); border-radius: 28px; border: 3px solid #0A0A0A; background: #fff; box-shadow: 6px 6px 0 #FFEE00; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 24px; }
.brand-top img { max-width: 100%; max-height: 90px; width: auto; height: auto; object-fit: contain; }
.brand-word { font-family: 'General Sans', sans-serif; font-weight: 700; font-size: clamp(34px, 3.4vw, 52px); letter-spacing: -0.03em; line-height: 1; color: #6B3A1E; }
.brand-sub { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: #6B3A1E; opacity: .8; }
@media (max-width: 1023px) { .brand-tops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Caso Laddu: reel reproducible */
.case-reel { position: absolute; inset: 0; }
.case-reel img, .case-reel iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.case-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 3px solid #0A0A0A; background: #FFEE00; color: #0A0A0A; font-size: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1); }
@media (hover: hover) { .case-play:hover { transform: scale(1.1); } }

/* Resultados reales */
.proof-card { margin: 0; width: min(100%, 560px); border-radius: 28px; background: #1F1F1F; border: 2px solid #2a2a2a; padding: 16px; transform: rotate(-1.5deg); box-shadow: 10px 10px 0 #FFEE00; }
.proof-card img { width: 100%; height: auto; border-radius: 18px; display: block; }
.proof-card figcaption { padding: 14px 6px 4px; font-size: 15px; color: #BDBDBD; }

/* Encontrá más contenido: carrusel de reels en 9:16 */
.reel-row { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.reel-track { width: 100%; display: flex; justify-content: safe center; gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 6px 4px 10px; scroll-behavior: smooth; }
.reel-track::-webkit-scrollbar { display: none; }
.reel-item { margin: 0; flex: 0 0 min(78vw, 340px); scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* El reproductor de Instagram muestra el video en 4:5 con bandas; se amplía y se recorta justo al borde del video */
.reel-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 28px; border: 3px solid #0A0A0A; background: #0A0A0A; box-shadow: 8px 8px 0 #0A0A0A; }
.reel-frame iframe { position: absolute; top: -54px; left: -21.75%; width: 143.5%; height: 300%; border: 0; }
.reel-frame.is-video { box-shadow: 8px 8px 0 #0A0A0A; }
.reel-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-item figcaption { max-width: 320px; min-height: 0; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 15px; line-height: 1.4; text-align: center; text-wrap: balance; }
.reel-item figcaption strong { font-family: 'General Sans', sans-serif; font-weight: 700; }
.reel-btn { margin-top: auto; height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; border-radius: 999px; background: #0A0A0A; color: #FFEE86; font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 15px; }
.reel-btn svg { width: 18px; height: 18px; fill: currentColor; }
.reel-nav { display: flex; align-items: center; gap: 14px; }
.reel-nav[hidden] { display: none; }
.reel-nav button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #0A0A0A; background: transparent; color: #0A0A0A; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; }
.reel-dots { display: flex; gap: 6px; }
.reel-dots i { width: 8px; height: 8px; border-radius: 999px; background: rgba(10,10,10,.25); transition: width 300ms ease, background 300ms ease; }
.reel-dots i.on { width: 26px; background: #0A0A0A; }

/* Trayecto: nota reproducible */
[data-yt] { cursor: pointer; }
[data-yt] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.yt-play { cursor: pointer; padding: 0; }
.hl { background: #FFEE00; padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Trayecto: Coberturas 2026, una por vez, mismo formato que la nota de TV */
.cov-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cov-nav { display: flex; gap: 8px; }
.cov-nav button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #0A0A0A; background: #fff; color: #0A0A0A; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: background 200ms ease, color 200ms ease; }
@media (hover: hover) { .cov-nav button:hover { background: #0A0A0A; color: #FFEE00; } }
.cov-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline: none; scroll-behavior: smooth; }
.cov-track::-webkit-scrollbar { display: none; }
.cov-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.cov-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: flex; flex-wrap: wrap; gap: 24px 36px; align-items: center; padding: 4px 2px; }
.cov-video { flex: 1 1 300px; min-width: 0; position: relative; border-radius: 24px; overflow: hidden; border: 3px solid #0A0A0A; aspect-ratio: 16 / 9; background: #0A0A0A; }
.cov-video img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity 260ms ease; }
.cov-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; background: #FFEE00; color: #0A0A0A; display: flex; align-items: center; justify-content: center; border: 3px solid #0A0A0A; font-size: 26px; pointer-events: none; }
@media (hover: hover) { .cov-video:hover img { opacity: .85; } }
.cov-label { padding: 5px 12px; border-radius: 999px; background: #0A0A0A; color: #FFEE00; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cov-count { margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: #595959; }
.cov-track:focus-visible, .cov-video:focus-visible { outline: 3px solid #FFEE00; outline-offset: 4px; border-radius: 24px; }

/* Formatos de mi canal de YouTube: cards jerárquicas (Cómo lo hizo grande, dos horizontales, dos cuadradas) */
:root { --span4: span 4; }
@media (max-width: 1023px) { :root { --span4: span 1; } }
.fmt-watch { margin-top: 6px; height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 999px; background: #FFEE00; color: #0A0A0A; font-weight: 600; font-size: 15px; }
/* En desktop el botón de las cards chicas aparece al pasar el mouse; en celular queda siempre visible */
[data-bento] > img { transition: opacity 300ms ease, transform 700ms cubic-bezier(0.23,1,0.32,1); }
@media (hover: hover) and (min-width: 1024px) {
  .fmt-watch-hover { opacity: 0; transform: translateY(8px); transition: opacity 250ms ease, transform 250ms ease; }
  [data-bento]:hover .fmt-watch-hover, [data-bento]:focus-within .fmt-watch-hover { opacity: 1; transform: none; }
  [data-bento]:hover > img { opacity: .6 !important; transform: scale(1.04); }
  /* Con video de fondo, el hover amarillo del diseño tapaba el texto: queda oscuro y solo el borde se marca */
  [data-bento]:has(> img):hover { background: #1F1F1F !important; color: #fff !important; border-color: #FFEE00 !important; }
}

/* Comunidad centrada */
#comunidad h2 { justify-content: center; }

/* Cita de la comunidad: el resaltado "luchito querido" nunca se parte */
[data-community] span { white-space: nowrap; }
@media (max-width: 600px) { [data-community] { font-size: 28px !important; line-height: 1.08 !important; } }

/* El mail de contacto siempre en una sola línea */
a[href^="mailto:"] { white-space: nowrap; }
footer a[href^="mailto:"] { font-size: clamp(13px, 1.15vw, 16px) !important; }
@media (max-width: 1023px) { footer a[href^="mailto:"] { font-size: 15px !important; } }
@media (min-width: 800px) and (max-width: 1023px) { footer a[href^="mailto:"] { font-size: 13px !important; gap: 6px !important; } }

/* ===== Celular y tablet: contenido centrado (desktop no se toca) ===== */
@media (max-width: 1023px) {
  /* Métricas: "Seguime en" en su propia línea y los chips centrados */
  .net-pill { justify-content: center; }
  section[aria-labelledby="metricas-t"] [data-mc="row"] > span:first-child { flex-basis: 100%; text-align: center; margin: 0 0 4px !important; }

  /* Reels: el primero arranca centrado y se desliza a los costados */
  .reel-track { justify-content: flex-start; padding-inline: calc(50% - min(39vw, 170px)); scroll-padding-inline: calc(50% - min(39vw, 170px)); }

  /* Marcas: título y sticker centrados */
  section[aria-labelledby="marcas-t"] > div:first-child { justify-content: center; text-align: center; }

  /* Trayecto: sin la línea de tiempo lateral, que corría todo a la derecha */
  [data-trayecto] { padding-left: 0 !important; }
  [data-trayecto] > [aria-hidden="true"], [data-milestone] > span[aria-hidden="true"], [data-trayecto] > div > span[aria-hidden="true"] { display: none !important; }
  [data-milestone] { justify-content: center; }

  /* Coberturas 2026: título arriba, flechas debajo, todo centrado */
  .cov-head { flex-direction: column; justify-content: center; text-align: center; gap: 12px; }
  .cov-slide { justify-content: center; }
  .cov-count { width: 100%; }
}

/* Formulario */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-status { margin: 0; min-height: 1.4em; font-size: 15px; font-weight: 500; text-align: center; }
.form-status[data-state="ok"] { color: #1a7f3c; }
.form-status[data-state="error"] { color: #992819; }
.form-status a { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  [data-loader] { display: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}