/* Rouge · estilos del portafolio. Requiere ../tokens.css.
   Vocabulario del sistema: dos superficies planas que se alternan, esquinas
   redondeadas en tres pasos, píldoras con paréntesis, chips de categoría y —el
   movimiento que lo define— una serif itálica incrustada a media frase dentro
   de la sans. Todo valor sale de tokens.css. */

/* ============ 0 · BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;padding:0 var(--marco) var(--marco);background:var(--rosa);color:var(--rojo);
  font-family:var(--f-display);font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}

/* El marco: la página vive dentro de un rectángulo con borde, como una ventana.
   Arriba va a hueso con el borde de la pantalla —si se deja aire, al scrollear
   asoma una franja rosa sobre el nav que se lee como un fallo—, así que las
   esquinas redondeadas quedan solo abajo.
   `overflow:clip` y no `hidden`: hidden crearía contexto de scroll y el nav
   sticky de dentro dejaría de pegarse. */
.marco{background:var(--blanco);border:1.5px solid var(--rojo);border-top:none;
  border-radius:0 0 var(--r-marco) var(--r-marco);overflow:clip}

/* El nav es sticky dentro del marco: cada ancla reserva su alto. */
:root{--nav-h:4.5rem}
section[id]{scroll-margin-top:var(--nav-h)}

/* ============ 1 · NAV ============ */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:var(--p-4);height:var(--nav-h);padding:0 var(--pad-x);
  background:var(--blanco);border-bottom:1.5px solid var(--rojo)}
.nav-marca{font-family:var(--f-display);font-weight:800;font-style:italic;font-size:1.5rem;letter-spacing:-.02em;
  color:var(--rojo);text-decoration:none;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.nav-links a{display:inline-block;padding:.45rem .9rem;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:500;color:var(--rojo);text-decoration:none;
  transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.nav-links a:hover{background:var(--rosa)}
.nav-links a.is-current{background:var(--rojo);color:var(--blanco)}
.nav-lang{display:inline-flex;align-items:center;gap:.3rem;margin-left:.6rem;font-size:.8rem;font-weight:600;color:var(--rojo)}
.nav-lang button{font:inherit;color:inherit;background:none;border:none;padding:0 .1rem;cursor:pointer;opacity:.5;
  transition:opacity var(--dur-hover) var(--ease)}
.nav-lang button.is-on{opacity:1}
.nav-toggle{display:none;width:42px;height:42px;padding:0;background:transparent;border:1.5px solid var(--rojo);
  border-radius:var(--r-pill);color:var(--rojo);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;
  transition:transform var(--dur-hover) var(--ease),top var(--dur-hover) var(--ease)}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}
body.menu-abierto{overflow:hidden}
body.menu-abierto .nav-toggle span{background:transparent}
body.menu-abierto .nav-toggle span::before{top:0;transform:rotate(45deg)}
body.menu-abierto .nav-toggle span::after{top:0;transform:rotate(-45deg)}

.menu{position:fixed;inset:0 var(--marco) var(--marco);z-index:80;background:var(--rojo);border-radius:var(--r-marco);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
body.menu-abierto .menu{opacity:1;pointer-events:auto}
/* El aspa vive DENTRO del panel, que va fijo. No puede depender de la cabecera:
   al abrir el menú se pone overflow:hidden en el body, eso anula el sticky y el
   nav se va con el scroll — estando a media página desaparecía de la pantalla. */
.menu__cerrar{position:absolute;top:var(--p-3);right:var(--pad-x);width:42px;height:42px;padding:0;
  display:flex;align-items:center;justify-content:center;background:transparent;
  border:1.5px solid var(--blanco);border-radius:var(--r-pill);color:var(--blanco);cursor:pointer;
  transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.menu__cerrar:hover{background:var(--blanco);color:var(--rojo)}
.menu__cerrar span{display:block;width:16px;height:1.5px;background:transparent;position:relative}
.menu__cerrar span::before,.menu__cerrar span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor}
.menu__cerrar span::before{transform:rotate(45deg)}
.menu__cerrar span::after{transform:rotate(-45deg)}
.menu a{font-weight:700;font-size:2rem;letter-spacing:-.02em;color:var(--blanco);text-decoration:none}

/* ============ 2 · PIEZAS DE VOCABULARIO ============ */

/* El movimiento que define el sistema: la serif itálica dentro de la sans. */
.titulo{margin:0;font-weight:800;font-size:clamp(2.2rem,5.2vw,4.6rem);line-height:1.02;letter-spacing:-.03em;color:var(--rojo)}
.titulo em{font-family:var(--f-acento);font-style:italic;font-weight:600;letter-spacing:-.01em}
.titulo--centro{text-align:center}

/* Etiqueta-píldora de sección */
.kicker{display:inline-block;padding:.5rem 1.05rem;border:1px solid var(--rojo);border-radius:var(--r-pill);
  font-size:.82rem;font-weight:500;color:var(--rojo);line-height:1}

/* Botón píldora con paréntesis */
.btn{display:inline-flex;align-items:center;gap:.4em;padding:.9rem 2.1rem;border:1.5px solid var(--rojo);
  border-radius:var(--r-pill);font-size:.95rem;font-weight:600;color:var(--rojo);background:transparent;
  text-decoration:none;cursor:pointer;transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.btn::before{content:"("}
.btn::after{content:")"}
.btn:hover{background:var(--rojo);color:var(--blanco)}
.btn--claro{border-color:var(--blanco);color:var(--blanco)}
.btn--claro:hover{background:var(--blanco);color:var(--rojo)}

/* Chips de categoría — el activo va en rojo pleno */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.chip{padding:.5rem 1.15rem;border:none;border-radius:var(--r-pill);background:var(--rosa);
  font:inherit;font-size:.85rem;font-weight:500;color:var(--rojo);cursor:pointer;
  transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.chip:hover{background:#F2D4D4}
.chip.is-on{background:var(--rojo);color:var(--blanco)}


.seccion{padding:var(--p-7) var(--pad-x)}
.seccion--rosa{background:var(--rosa)}
.cabecera{display:flex;flex-direction:column;gap:var(--p-3);margin-bottom:var(--p-5)}
.cabecera--centro{align-items:center;text-align:center}

/* ============ 3 · HERO ============ */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:1.5px;background:var(--rojo);
  border:1.5px solid var(--rojo);border-radius:var(--r-panel);overflow:hidden;margin:var(--marco)}
.hero-foto{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--rosa)}
.hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.1s var(--ease)}
.hero-foto img.is-on{opacity:1}
@media (prefers-reduced-motion: reduce){ .hero-foto img{transition:none} }
.hero-panel{background:var(--rosa);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--p-3);padding:var(--p-5) var(--p-4);text-align:center}
.hero-rol{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo);opacity:.75}
.hero-lead{margin:0;max-width:34ch;font-size:.92rem;line-height:1.5;color:var(--rojo);opacity:.85}
.hero-nombre{margin:0;font-weight:800;font-style:italic;font-size:clamp(3rem,7.4vw,7rem);line-height:.94;
  letter-spacing:-.045em;color:var(--rojo)}

/* Métricas: fila de tres bajo el hero */
.metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--rojo);
  border:1.5px solid var(--rojo);border-radius:var(--r-panel);overflow:hidden;margin:0 var(--marco)}
.metrica{background:var(--blanco);padding:var(--p-4) var(--p-3);text-align:center}
.metrica b{display:block;font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.metrica span{display:block;margin-top:.35rem;font-size:.82rem;line-height:1.35;opacity:.8}

/* ============ 4 · REJILLAS DE TARJETA ============ */
.rejilla{display:grid;gap:var(--p-3)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}

.tarjeta{position:relative;display:flex;flex-direction:column;background:var(--gris);
  border-radius:var(--r-card);overflow:hidden;text-decoration:none;color:var(--rojo)}
.tarjeta__media{aspect-ratio:4/5;overflow:hidden}
.tarjeta__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tarjeta:hover .tarjeta__media img{transform:scale(1.04)}
.tarjeta__pie{padding:var(--p-3)}
.tarjeta__pie b{display:block;font-size:.95rem;font-weight:700}
.tarjeta__pie span{display:block;margin-top:.15rem;font-size:.82rem;opacity:.7}
.marca-nuevo{position:absolute;top:var(--p-2);right:var(--p-2);padding:.3rem .7rem;border-radius:var(--r-pill);
  background:var(--rojo);color:var(--blanco);font-size:.7rem;font-weight:600;letter-spacing:.04em}

/* ============ 5 · PANEL ROSA (la voz del sistema) ============ */
.manifiesto{background:var(--rosa);border-radius:var(--r-panel);padding:var(--p-6) var(--p-5);
  display:flex;flex-direction:column;gap:var(--p-5);margin:0 var(--marco)}
.manifiesto p{margin:var(--p-3) 0 0;font-size:clamp(1.5rem,3.4vw,3rem);line-height:1.2;font-weight:600;
  letter-spacing:-.025em;color:var(--rojo)}
.manifiesto em{font-family:var(--f-acento);font-style:italic;font-weight:600}
.manifiesto__fotos{display:flex;gap:var(--p-2);align-self:flex-end}
.manifiesto__fotos img{width:clamp(100px,11vw,170px);aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-card)}


/* ============ 5b · MURO DE MARCAS ============
   Sin logotipos: el creator sube los suyos y la celda los aloja igual. Mientras
   tanto manda el nombre en la display, que es lo honesto y lo que el sistema
   sabe hacer — la celda es la misma píldora rectangular del resto. */
.muro{display:flex;flex-wrap:wrap;gap:var(--p-3)}
.muro__celda{flex:1 1 calc(25% - var(--p-3) * 3 / 4);min-width:11rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  min-height:8.5rem;padding:var(--p-4) var(--p-3);text-align:center;
  border:1px solid rgba(222,59,59,.32);border-radius:var(--r-card);
  transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease)}
.muro__celda:hover{background:var(--rojo);border-color:var(--rojo);color:var(--blanco)}
.muro__celda b{font-size:clamp(1.05rem,1.7vw,1.45rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.muro__celda span{font-size:.76rem;opacity:.7}

/* ============ 6 · SPLIT FOTO + PANEL ROJO ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.5px;background:var(--rojo);
  border:1.5px solid var(--rojo);border-radius:var(--r-panel);overflow:hidden;margin:0 var(--marco)}
.split__foto{position:relative;aspect-ratio:4/3;overflow:hidden}
.split__foto img{width:100%;height:100%;object-fit:cover}
.split__panel{background:var(--rojo);color:var(--blanco);padding:var(--p-6) var(--p-5);
  display:flex;flex-direction:column;justify-content:center;gap:var(--p-3)}
.split__panel .titulo{color:var(--blanco)}
.split__panel p{margin:0;font-size:1rem;line-height:1.65;opacity:.92}
.split__panel .btn{align-self:flex-start}

/* ============ 7 · REEL 9:16 ============ */
.reel{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--p-3)}
.clip{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:var(--r-card);
  background:var(--rojo);border:none;padding:0;margin:0;width:100%;cursor:pointer;font:inherit;color:inherit;text-align:left}
.clip img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.clip:hover img{transform:scale(1.05)}
/* `contain`: si el máster del creator viene apaisado, se ve entero en vez de recortado */
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--rojo);z-index:2}
.clip__meta{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:baseline;justify-content:space-between;
  gap:.5rem;padding:var(--p-3);color:var(--blanco);
  background:linear-gradient(to top,rgba(188,49,52,.9),rgba(188,49,52,0));
  transition:opacity var(--dur-hover) var(--ease)}
.clip__meta b{font-size:.9rem;font-weight:700}
.clip__meta span{font-size:.78rem;opacity:.85}
.clip__play{position:absolute;top:var(--p-2);left:var(--p-2);z-index:3;width:2.4rem;height:2.4rem;border-radius:var(--r-pill);
  background:var(--blanco);color:var(--rojo);display:flex;align-items:center;justify-content:center;font-size:.8rem;
  opacity:0;transform:scale(.85);transition:opacity var(--dur-hover) var(--ease),transform var(--dur-hover) var(--ease)}
.clip:hover .clip__play{opacity:1;transform:scale(1)}
.clip.reproduciendo .clip__play,.clip.reproduciendo .clip__meta{opacity:0}

/* Tope de los filtros bajo el nav */
.filtros{position:sticky;top:var(--nav-h);z-index:50;
  padding:var(--p-3) var(--pad-x);background:var(--blanco);border-bottom:1px solid rgba(222,59,59,.2);
  margin:0 calc(var(--pad-x) * -1) var(--p-4)}

/* ============ 8 · RESEÑAS ============ */
/* Flex con crecimiento en vez de rejilla fija: con 3 columnas clavadas, 1, 2,
   4, 5, 7, 8 o 10 reseñas dejaban media fila vacía. Así las de la última fila
   se reparten el sobrante y no hay hueco con ningún número. */
.resenas{display:flex;flex-wrap:wrap;gap:var(--p-3);align-items:stretch}
.resena{flex:1 1 calc(33.333% - var(--p-3) * 2 / 3);min-width:16rem}
.resena{display:flex;flex-direction:column;gap:var(--p-3);padding:var(--p-4);background:var(--rosa);
  border-radius:var(--r-panel);margin:0}
.resena blockquote{margin:0;font-size:1rem;line-height:1.5;font-weight:500;color:var(--rojo)}
.resena figcaption{font-size:.82rem;color:var(--rojo);opacity:.75;margin-top:auto}
.resena figcaption b{display:block;font-weight:700;opacity:1;margin-bottom:.1rem}

/* ============ 9 · TARIFAS ============ */
.tarifas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--p-3)}
/* La rejilla se adapta a cuántas tarifas haya: sin esto, 1, 2, 4 o 5 dejan
   huecos en la última fila. El corte va a 1001px, justo por encima del de
   tablet: estas reglas tienen más especificidad que la de una columna, así que
   con un corte más bajo se colarían en tablet y dejarían dos columnas donde
   debe haber una. */
@media (min-width:1001px){
  .tarifas:has(> :last-child:nth-child(1)){grid-template-columns:1fr}
  .tarifas:has(> :last-child:nth-child(2)),
  .tarifas:has(> :last-child:nth-child(4)){grid-template-columns:repeat(2,1fr)}
  .tarifas:has(> :last-child:nth-child(5)) > :last-child{grid-column:span 2}
}
.tarifa{display:flex;flex-direction:column;gap:var(--p-3);padding:var(--p-5) var(--p-4);
  border:1.5px solid var(--rojo);border-radius:var(--r-panel);text-decoration:none;color:var(--rojo);
  transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.tarifa:hover{background:var(--rojo);color:var(--blanco)}
.tarifa__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--p-2);
  font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.tarifa h3{margin:0;font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.tarifa ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.4rem;font-size:.88rem;line-height:1.45}
.tarifa li{display:flex;gap:.5em}
.tarifa li::before{content:"—";opacity:.5;flex:0 0 auto}
.tarifa__precio{margin-top:auto;font-size:1.6rem;font-weight:800;letter-spacing:-.02em}

/* ============ 10 · EQUIPO (lista de filas) ============ */
.equipo{display:flex;flex-direction:column}
.equipo__fila{display:grid;grid-template-columns:1fr 2fr auto;gap:var(--p-4);align-items:baseline;
  padding:var(--p-3) 0;border-top:1px solid rgba(222,59,59,.25)}
.equipo__fila:last-child{border-bottom:1px solid rgba(222,59,59,.25)}
.equipo__fila b{font-size:1.05rem;font-weight:700}
.equipo__fila p{margin:0;font-size:.9rem;line-height:1.5;opacity:.8}
.equipo__fila span{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.6;white-space:nowrap}

/* ============ 11 · CONTACTO Y FOOTER ============ */
.contacto{background:var(--rojo);color:var(--blanco);border-radius:var(--r-panel);
  padding:var(--p-7) var(--p-5);margin:0 var(--marco);text-align:center}
.contacto .titulo{color:var(--blanco)}
.contacto__canales{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--p-2) var(--p-5);margin-top:var(--p-5)}
.contacto__canal{text-align:center}
.contacto__canal b{display:block;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:.3rem}
.contacto__canal a{display:block;color:inherit;text-decoration:none;font-size:1rem;line-height:1.6;
  transition:opacity var(--dur-hover) var(--ease)}
.contacto__canal a:hover{opacity:.7;text-decoration:underline;text-underline-offset:3px}

.pie{background:var(--rojo-hondo);color:var(--blanco);border-radius:var(--r-panel);
  padding:var(--p-5);margin:var(--marco);text-align:center}
.pie__marca{font-weight:800;font-style:italic;font-size:1.5rem;letter-spacing:-.02em}
.pie__legal{margin:var(--p-3) 0 0;font-size:.8rem;opacity:.7}
.pie__firma{margin:.4rem 0 0;font-size:.75rem;opacity:.5}
.pie__firma a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ============ TABLET (≤ 1000px) ============ */
@media (max-width:1000px){
  :root{--nav-h:4rem}
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .rejilla--4{grid-template-columns:repeat(2,1fr)}
  .reel{grid-template-columns:repeat(3,1fr)}
  .equipo__fila{grid-template-columns:1fr auto;gap:var(--p-2)}
  .equipo__fila p{grid-column:1/-1}
  .tarifas{grid-template-columns:1fr}
  .manifiesto{grid-template-columns:1fr}
}

/* ============ MÓVIL (≤ 620px) ============ */
@media (max-width:620px){
  :root{--pad-x:var(--p-3);--nav-h:3.6rem;--marco:.5rem;
        --r-marco:20px;--r-panel:16px;--r-card:12px}
  .seccion{padding:var(--p-6) var(--pad-x)}
  .hero{grid-template-columns:1fr}
  .hero-foto{aspect-ratio:4/5}
  .metricas{grid-template-columns:1fr}
  .rejilla--4{grid-template-columns:1fr}
  .reel{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split__foto{aspect-ratio:1/1}
  .split__panel{padding:var(--p-5) var(--p-4)}
  .manifiesto{padding:var(--p-5) var(--p-4)}
  .manifiesto__fotos img{width:88px}
  .contacto{padding:var(--p-6) var(--p-4)}
  .contacto__canales{flex-direction:column;gap:var(--p-4)}
  .menu a{font-size:1.6rem}
  .equipo__fila{grid-template-columns:1fr;gap:.3rem}
}