/* Copiado TAL CUAL de cumbia-la-actitud/live/index.html (lo publicado el 2026-10-07).
   No editar aca a mano: si cambia la pagina viva, volver a extraer. */
  .def-photo-wrap { position: relative; }
  /* La foto va sin fondo (webp con transparencia) y con los bordes
     difuminados para que el espiral y la mancha no se vean cortados a tijera */
  .def-photo-wrap img {
    position: relative; z-index: 1; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 94%, transparent 100%), linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 94%, transparent 100%), linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
    mask-composite: intersect;
  }
  .def-blob { position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.35; z-index: 0; }
  .def-blob.b1 { width: 260px; height: 260px; background: var(--teal); top: -60px; left: -80px; }
  .def-blob.b2 { width: 220px; height: 220px; background: var(--yellow); bottom: -60px; right: -60px; }

  /* ===== SECTION: ¿QUIÉNES SOMOS? ===== */
  .qs { background: var(--cream); padding-block: var(--space-section); position: relative; overflow: hidden; }
  .qs-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  @media (max-width: 900px) { .qs-grid { grid-template-columns: 1fr; } }
  .qs h2 {
    font-family: var(--font-display); font-weight: 400; font-size: var(--text-h2); line-height: 1.0;
    letter-spacing: 0.015em; color: var(--ink); margin-bottom: 24px;
  }
  .qs h2 .accent { color: var(--pink); }
  .qs p {
    font-family: var(--font-body); font-weight: 500;
    font-size: clamp(1.06rem, 1rem + 0.25vw, 1.2rem); line-height: 1.65;
    color: var(--ink-soft); margin-bottom: 20px; max-width: 52ch;
  }
  .qs .qs-aap { color: var(--pink); font-weight: 700; }
  /* El fondo crema va en el wrapper a proposito: `multiply` se mezcla con su grupo de apilado,
     y contra un padre transparente no tiene con que mezclarse (se veia el bloque blanco). */
  .qs-photo-wrap { position: relative; background: var(--cream); }
  /* La imagen trae el borde izquierdo "rasgado" sobre blanco. `multiply` lo funde con el crema
     (blanco x crema = crema) y deja la forma pintada flotando, como en el arte original; el
     flood-fill, en cambio, se comia las nubes que tocan el borde. La mascara solo suaviza el filo. */
  .qs-photo-wrap img {
    position: relative; z-index: 1; width: 100%; height: auto;
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 100%);
  }
  /* Sin blobs de color detras: `multiply` se mezcla con lo que haya debajo y los tineria la foto. */

  /* ===== SECTION: EMBAJADORES ===== */
  .emb { background: var(--dark); padding-block: var(--space-section); position: relative; overflow: hidden; }
  /* El titulo encabeza TODA la seccion: debajo del retrato va, mas adelante, la
     descripcion de cada embajador. Por eso no comparte fila con la foto. */
  .emb-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
  .emb h2 {
    font-family: var(--font-display); font-weight: 400; font-size: var(--text-h2); line-height: 1.0;
    letter-spacing: 0.02em; color: #fff;
  }
  .emb-lead {
    font-family: var(--font-body); font-weight: 500; font-size: var(--text-lead); line-height: 1.6;
    color: rgba(255,255,255,0.72); max-width: none; margin-top: 14px;
  }
  /* 1ª línea termina en "peruanos de" (~500px a 19px): cabe desde ~560px. En móvil no entra,
     así que ahí corta antes de "30" y "30 peruanos" nunca se separa. */
  .emb-lead .br-lg { display: none; }
  @media (max-width: 559px) { .emb-lead { font-size: 1.0625rem; } }
  @media (max-width: 359px) { .emb-lead .br-sm { display: none; } }
  @media (min-width: 560px) { .emb-lead .br-sm { display: none; } .emb-lead .br-lg { display: inline; }
  }
  /* Un embajador por vista. El carril nativo (scroll + snap) hace el trabajo: se desliza
     con el dedo en el celular y las flechas solo lo empujan, sin animaciones JS que iOS
     congele a mitad de camino. Las flechas van contra los margenes de la seccion, no
     pegadas al retrato. */
  .emb-stage { position: relative; padding-inline: 96px; }
  .emb-track {
    list-style: none; display: flex; width: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .emb-track::-webkit-scrollbar { display: none; }
  .emb-track li { flex: 0 0 100%; scroll-snap-align: center; }
  /* Cada embajador es una FILA completa — su nombre (y manana su descripcion) a la
     izquierda, su retrato a la derecha. Van juntos dentro del slide a proposito: asi los
     arrastra el mismo scroll y nunca puede quedar el nombre de uno con la cara de otro,
     que es lo que pasa cuando el texto lo actualiza el JS y el dedo desliza mas rapido. */
  /* `start` y no `center`: el nombre es el TITULO de la descripcion, asi que arranca arriba
     y el texto que venga crece hacia abajo, en vez de empujarlo fuera del eje del retrato. */
  .emb-card { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
  .emb-info { padding-top: clamp(1rem, 3vw, 2.5rem); }
  .emb-card h3 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.02; letter-spacing: 0.035em;
    color: var(--green);
  }
  .emb-card figure { width: min(440px, 46vw); }
  /* Retratos del set 2026-10-27: cuadrados, con el fondo rojo de la marca ya horneado. */
  .emb-card img {
    width: 100%; aspect-ratio: 1 / 1;
    object-fit: cover; border-radius: 14px;
  }
  @media (max-width: 760px) {
    /* El celular apila: primero la cara, y debajo su nombre encabezando lo que se lea de el. */
    .emb-card { grid-template-columns: 1fr; gap: 16px; justify-items: center; align-items: center; }
    .emb-info { padding-top: 0; }
    .emb-card figure { width: 100%; max-width: 330px; order: -1; }
    .emb-card h3 { text-align: center; }
  }
  .emb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 52px; height: 72px; padding: 0; border: 0; cursor: pointer;
    background: transparent; color: var(--pink); z-index: 2;
    transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
  }
  .emb-nav[data-dir="-1"] { left: 0; }
  .emb-nav[data-dir="1"]  { right: 0; }
  .emb-nav:hover { transform: translateY(-50%) scale(1.12); }
  .emb-nav:active { opacity: 0.6; }
  .emb-nav svg { width: 30px; height: 44px; }
  .emb-dots {
    display: flex; justify-content: center; gap: 9px; margin-top: 24px;
  }
  .emb-dot {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,0.28); transition: background 0.25s, transform 0.25s;
  }
  .emb-dot[aria-current="true"] { background: var(--pink); transform: scale(1.25); }
  @media (max-width: 760px) {
    /* En el celular las flechas se achican y el escenario les deja menos sangria. */
    .emb-stage { padding-inline: 48px; }
    .emb-nav { width: 40px; height: 60px; }
    .emb-nav svg { width: 22px; height: 34px; }
  }