/* lalaia · portada: slider del coco (coco que se expande, titular estilo lamalama y, si se activa, estela de puntos) */
/* Las fuentes (Archivo e IBM Plex Mono) y los colores de la marca están en lalaia.css */

.coco-hero {
  --coco-naranja: var(--naranja, #f6560f);   /* naranja fosforito: borde izquierdo de la foto */
  --coco-naranja-medio: #ec430a;
  --coco-naranja-oscuro: #e23d0b;   /* borde derecho */
  --coco-texto: #fff7ec;            /* crema del titular */
  --coco-tinta: #1a1a1a;            /* texto pequeño y botones sobre el naranja */
  --coco-trama: 0.09;
  --coco-tam: 0.68;                  /* tamaño del coco (1 = a sangre) */
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(100vh - 72px);
  height: calc(100svh - 72px);
  min-height: 600px;
  background: linear-gradient(90deg, var(--coco-naranja) 0%, var(--coco-naranja-medio) 55%, var(--coco-naranja-oscuro) 100%);
  isolation: isolate;
  color: var(--coco-texto);
}

.coco-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 45%;
  transform: scale(calc(1.06 * var(--coco-tam, 1)));
  transform-origin: 66% 40%;   /* al reducirlo, el coco se queda arriba a la derecha, lejos del titular */
  will-change: transform, filter;
  user-select: none;
  pointer-events: none;
  z-index: 0;
  /* Bordes fundidos con el naranja por los cuatro lados: así el coco puede ir más pequeño
     sin que se vea el corte de la foto (ni la franja de coco rallado de abajo) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 97%),
                      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 97%),
                      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
}

.coco-hero__trama,
.coco-hero__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.coco-hero__trama { z-index: 1; opacity: var(--coco-trama); background-repeat: repeat; image-rendering: pixelated; }
.coco-hero__fx { z-index: 2; image-rendering: pixelated; }

.coco-hero__contenido {
  position: relative;
  z-index: 3;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  padding: 0 clamp(16px, 3vw, 48px) clamp(36px, 7vh, 88px);
  /* sombra suave solo detrás del titular, para que el crema se lea sobre el naranja */
  background: radial-gradient(ellipse 75% 62% at 0% 100%, rgba(80, 18, 0, 0.42) 0%, rgba(80, 18, 0, 0) 72%);
}

.coco-hero__texto {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: 32px 48px;
  align-items: end;
}

.coco-hero__kicker {
  grid-column: 1 / -1;
  margin: 0 0 -8px;
  font: 500 clamp(11px, 0.9vw, 13px)/1.2 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.8s ease 0.15s;
}

/* «.coco-hero» delante para ganar a «.p-hero h1» de lalaia.css */
.coco-hero .coco-hero__titulo {
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-stretch: 108%;
  font-variation-settings: "wdth" 108;
  font-size: clamp(30px, 6vw, 118px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--coco-texto);
}
.coco-hero .coco-hero__titulo span { color: inherit; }
.coco-hero__titulo .linea { display: block; overflow: hidden; white-space: nowrap; padding: 0.12em 0 0.06em; margin: -0.12em 0 -0.06em; }
.coco-hero__titulo .linea > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.coco-hero__titulo .linea:nth-child(2) > span { transition-delay: 0.12s; }
.coco-hero__titulo .linea:nth-child(3) > span { transition-delay: 0.24s; }

/* Columna derecha: tarjeta crema con texto oscuro, se lea encima del coco o del naranja */
.coco-hero__lado {
  color: var(--coco-tinta);
  background: var(--coco-texto);
  padding: 22px 24px 20px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease 0.45s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}
.coco-hero__lado p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; font-weight: 500; }
.coco-hero__lado .p-botones { gap: 12px; }
.coco-hero__lado .btn.acento { color: var(--coco-tinta); }
.coco-hero__lado .p-btn-borde { border-color: var(--coco-tinta); color: var(--coco-tinta); background: transparent; }
.coco-hero__lado .p-btn-borde:hover { background: var(--coco-tinta); color: var(--coco-texto); }
.coco-hero__lado .p-nota { color: #4a4a4a; font-size: 12px; margin: 14px 0 0; }

.coco-hero.listo .coco-hero__kicker { opacity: 0.95; }
.coco-hero.listo .coco-hero__titulo .linea > span { transform: none; }
.coco-hero.listo .coco-hero__lado { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .coco-hero { height: auto; min-height: calc(100svh - 72px); }
  .coco-hero__contenido { padding-top: 34vh; }
  .coco-hero__texto { grid-template-columns: 1fr; gap: 26px; }
  .coco-hero .coco-hero__titulo { font-size: clamp(30px, 8.4vw, 90px); }
  .coco-hero__lado { max-width: 520px; }
}
@media (max-width: 600px) {
  .coco-hero .coco-hero__titulo { font-size: 8.2vw; }
  /* En vertical la foto se coloca entera arriba (sin recortar el coco por los lados) */
  .coco-hero { --coco-tam: 1; }
  .coco-hero__img { inset: auto; left: -18%; top: 7%; width: 136%; height: auto; aspect-ratio: 2400 / 1616; transform-origin: 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .coco-hero__formatos { opacity: 1; transition: none; }
  .coco-hero__img { transform: scale(var(--coco-tam, 1)); }
  .coco-hero__fx { display: none; }
  .coco-hero__kicker, .coco-hero__lado { opacity: 1; transform: none; transition: none; }
  .coco-hero__titulo .linea > span { transform: none; transition: none; }
}

/* Variante con vídeo (en lugar del coco). El vídeo naranja tiene el fondo plano en el naranja
   de la marca, así que se coloca arriba a la derecha sin que se note el borde. */
.coco-hero--video { --coco-tam: 1; background: var(--naranja, #f6560f); }
.coco-hero--video .coco-hero__img {
  inset: auto;
  right: -6%;
  top: -4%;
  width: 78%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transform-origin: 50% 50%;
  -webkit-mask-image: none;
          mask-image: none;
}
/* Vídeo con fondo blanco (degradado gris muy suave hacia los bordes) y la forma naranja.
   Titular en oscuro; el vídeo sube un poco para que la forma no quede detrás del titular. */
.coco-hero--claro { --coco-texto: #1a1a1a; background: #fff; color: #1a1a1a; }
.coco-hero--claro .coco-hero__img { inset: auto; left: 0; right: auto; top: -22%; width: 100%; height: 122%; aspect-ratio: auto; }
.coco-hero--claro .coco-hero__contenido { background: none; }
.coco-hero--claro .coco-hero__lado { background: transparent; padding: 0; }
.coco-hero--claro .coco-hero__lado p { font-size: 16px; }
.coco-hero--claro .coco-hero__lado .p-nota { color: #4a4a4a; }
@media (max-width: 1000px) {
  .coco-hero--video:not(.coco-hero--claro) .coco-hero__img { right: auto; left: -20%; top: 0; width: 140%; }
}
@media (max-width: 1000px) {
  /* En vertical, la forma arriba y el vídeo fundido por abajo con el fondo claro */
  .coco-hero--claro .coco-hero__img { left: -30%; width: 160%; top: -6%; height: 64%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
}

/* Portada: titular de cuatro líneas más largas que el de antes; puede partirse en pantallas estrechas */
.coco-hero .coco-hero__titulo--largo { font-size: clamp(30px, 4.6vw, 84px); }
.coco-hero__titulo--largo .linea { white-space: normal; }
.coco-hero__titulo--largo .linea:nth-child(4) > span { transition-delay: 0.36s; }
.coco-hero__lado strong { font-weight: 800; }
/* Franja bajo el titular, de lado a lado del slider: a quién va dirigido y con qué formatos trabaja */
.coco-hero__franja { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap;
  border-top: 1px solid #1a1a1a; padding-top: 16px; margin-top: -6px; }
.coco-hero__franja .coco-hero__kicker { grid-column: auto; margin: 0; font-size: clamp(11px, 0.78vw, 13px); }
.coco-hero__formatos { margin: 0; font: 500 clamp(11px, 0.78vw, 13px)/1.6 "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: .04em; color: #1a1a1a;
  opacity: 0; transition: opacity 0.8s ease 0.55s; }
.coco-hero__formatos span { color: #6a6a6a; }
.coco-hero.listo .coco-hero__formatos { opacity: 1; }
/* La forma, más cerca del menú: menos blanco por arriba */
@media (min-width: 1001px) { .coco-hero--claro .coco-hero__img { top: -32%; } }
@media (max-width: 1000px) { .coco-hero--claro .coco-hero__img { top: -12%; } .coco-hero__contenido { padding-top: 30vh; } }
.coco-hero--claro .coco-hero__contenido { padding-bottom: clamp(28px, 5vh, 56px); }
@media (max-width: 1200px) {
  .coco-hero__texto { grid-template-columns: 1fr; gap: 26px; }
  .coco-hero .coco-hero__titulo--largo { font-size: clamp(30px, 6.4vw, 76px); }
  .coco-hero__lado { max-width: 620px; }
}
@media (max-width: 600px) {
  .coco-hero .coco-hero__titulo--largo { font-size: 6.3vw; }
}