/* ==========================================================================
   Kala accs. - hoja de estilos
   Paleta y estetica definidas por la marca. Ver README.md para editar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografias (auto-hospedadas, licencia OFL)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Lobster Two';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lobster-two-700-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fredoka-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fredoka-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marca */
  --chicle: #F090C8;
  --rojo:   #E84828;
  --palo:   #F8F0F8;
  --crema:  #FDF3FA;
  /* Tinta: version oscura de la familia rosa. Existe solo para que el texto
     de lectura pase contraste AA. El rojo se reserva para titulos grandes,
     sombras duras, estrellas y botones. */
  --tinta:  #4A1228;
  --tinta-suave: rgba(74, 18, 40, .72);

  /* Forma: botones y chips = pastilla, tarjetas y fotos = 22px, arcos = grandes */
  --r-pastilla: 999px;
  --r-tarjeta: 22px;
  --r-chica: 14px;

  /* Sombra dura desplazada */
  --dura: 7px;
  --dura-grande: 12px;

  --nav-h: 64px;
  --ancho: 1360px;
  --salto: clamp(4rem, 9vw, 7.5rem);
  --feston: 22px;

  --curva: cubic-bezier(.16, 1, .3, 1);
  --resorte: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: light;
  accent-color: #E84828;
}
@media (min-width: 900px) { :root { --nav-h: 76px; } }

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Las tarjetas y estrellas van rotadas: su caja rotada sobresale unos pixeles.
   `clip` recorta sin crear un contenedor de scroll; `hidden` es el respaldo. */
html, body { overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--palo);
  color: var(--tinta);
  font-family: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* el recorte horizontal vive en la regla html, body de arriba */
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul { list-style: none; padding: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 6px;
}
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#saltar {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  background: var(--rojo); color: var(--crema);
  padding: .7rem 1.2rem; border-radius: var(--r-pastilla);
  font-weight: 700; font-size: 1.1875rem; text-decoration: none;
  translate: 0 -180%;
  transition: translate .25s var(--curva);
}
#saltar:focus-visible { translate: 0 0; }

/* --------------------------------------------------------------------------
   4. Tipografia
   -------------------------------------------------------------------------- */
.script {
  font-family: 'Lobster Two', 'Brush Script MT', cursive;
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;                 /* holgura para descendentes en cursiva */
  padding-bottom: .1em;
  letter-spacing: .005em;
  text-wrap: balance;
}
.script--sombra { text-shadow: .042em .05em 0 var(--rojo); }

/* Titulo de seccion: rosa chicle con sombra dura roja, igual que el logo.
   Sobre los bloques rosas se invierte a crema, siempre con la sombra roja.

   NOTA DE ACCESIBILIDAD: este par de colores es el de la identidad, y el
   relleno solo (rosa sobre palido, crema sobre rosa) queda por debajo del
   minimo WCAG AA para texto grande. La sombra dura levanta mucho la lectura
   real, pero si en algun momento se necesita cumplir AA de forma estricta,
   alcanza con invertir el relleno y la sombra en la regla de abajo:
       color: var(--rojo); text-shadow: .04em .05em 0 var(--chicle);
   El resto del texto de la pagina (bajadas, parrafos, botones, etiquetas)
   ya cumple AA sin excepciones. */
.titulo-seccion {
  font-size: clamp(2.7rem, 9vw, 5.4rem);
  color: var(--chicle);
  text-shadow: .04em .05em 0 var(--rojo);
}
.bloque-rosa .titulo-seccion { color: var(--crema); }

.bajada {
  font-size: clamp(1.0625rem, 2.4vw, 1.2rem);
  max-width: 46ch;
  color: var(--tinta-suave);
}
.bloque-rosa .bajada { color: var(--tinta); }

/* --------------------------------------------------------------------------
   5. Utilidades
   -------------------------------------------------------------------------- */
.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}
@media (min-width: 900px) { .contenedor { width: min(100% - 5rem, var(--ancho)); } }

.seccion { padding-block: var(--salto); position: relative; }

/* Estrella de cuatro puntas: elemento recurrente de la marca */
.estrella { width: 1em; height: 1em; fill: currentColor; flex: none; }

.deco {
  position: absolute;
  pointer-events: none;
  color: var(--rojo);
  z-index: 1;
  line-height: 0;
}
.deco--crema { color: var(--crema); }
.deco--chicle { color: var(--chicle); }

/* --------------------------------------------------------------------------
   6. Bloques de color + transicion festoneada entre secciones
   -------------------------------------------------------------------------- */
.bloque-rosa {
  position: relative;
  z-index: 2;
  background: var(--chicle);
  color: var(--tinta);
}
.bloque-rosa::before,
.bloque-rosa::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--feston);
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 100%, var(--chicle) 0 calc(var(--feston) - .5px), transparent var(--feston));
  background-size: calc(var(--feston) * 2) var(--feston);
  background-repeat: repeat-x;
}
.bloque-rosa::before { top: calc(var(--feston) * -1); }
.bloque-rosa::after  { bottom: calc(var(--feston) * -1); scale: 1 -1; }
.bloque-rosa--sin-arriba::before { content: none; }
.bloque-rosa--sin-abajo::after   { content: none; }

/* --------------------------------------------------------------------------
   7. Botones
   19px / 700 es el minimo para que el crema sobre rojo cumpla AA texto grande.
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  padding: .85rem 1.65rem;
  border-radius: var(--r-pastilla);
  text-decoration: none;
  white-space: nowrap;
  transition: translate .18s var(--curva), box-shadow .18s var(--curva), background-color .18s var(--curva), color .18s var(--curva);
}
.boton .icono { width: 1.15em; height: 1.15em; }

.boton--rojo {
  background: var(--rojo);
  color: var(--crema);
  box-shadow: 5px 5px 0 var(--tinta);
}
.boton--rojo:hover { translate: -2px -3px; box-shadow: 8px 9px 0 var(--tinta); }
.boton--rojo:active { translate: 2px 3px; box-shadow: 2px 2px 0 var(--tinta); }

.boton--crema {
  background: var(--crema);
  color: var(--tinta);
  box-shadow: 5px 5px 0 var(--rojo);
}
.boton--crema:hover { translate: -2px -3px; box-shadow: 8px 9px 0 var(--rojo); }
.boton--crema:active { translate: 2px 3px; box-shadow: 2px 2px 0 var(--rojo); }

.boton--fantasma {
  background: transparent;
  color: var(--tinta);
  border: 2.5px solid currentColor;
}
.boton--fantasma:hover { background: var(--tinta); color: var(--crema); }

/* Para un boton que queda solo y tiene que sostener el bloque, como el cierre
   de contacto. Los minimos del clamp son los valores normales: en celular se ve
   igual que cualquier otro boton, porque ahi ya ocupa casi todo el ancho y
   agrandarlo lo desbordaria. Crece recien cuando hay lugar. */
.boton--grande {
  font-size: clamp(1.1875rem, 2.6vw, 1.45rem);
  padding: clamp(.85rem, 2vw, 1.15rem) clamp(1.65rem, 4vw, 2.4rem);
}
.boton--grande.boton--rojo { box-shadow: 6px 6px 0 var(--tinta); }
.boton--grande.boton--rojo:hover { box-shadow: 9px 10px 0 var(--tinta); }
.boton--grande.boton--rojo:active { box-shadow: 2px 2px 0 var(--tinta); }

.icono { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* --------------------------------------------------------------------------
   8. Navegacion fija
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* Fondo translucido sin backdrop-filter a proposito: la barra es fija y
     debajo hay animaciones perpetuas, asi que desenfocar obligaria a
     recomponer una franja del ancho de la pantalla en cada frame. En gama
     media eso se come los FPS y no aporta nada visible sobre estos colores. */
  background: rgba(248, 240, 248, .88);
  border-bottom: 2px solid transparent;
  transition: background-color .3s var(--curva), border-color .3s var(--curva);
}
.nav[data-pegado="si"] {
  background: rgba(248, 240, 248, .97);
  border-bottom-color: var(--rojo);
}

.nav__interior {
  width: min(100% - 1.5rem, var(--ancho));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 900px) { .nav__interior { width: min(100% - 5rem, var(--ancho)); } }

/* El logo se dimensiona por altura para que nunca empuje la barra. */
.nav__logo { display: block; flex: none; line-height: 0; }
.nav__logo img { height: 46px; width: auto; }
@media (min-width: 900px) { .nav__logo img { height: 54px; } }

.nav__enlaces { display: none; }
@media (min-width: 1024px) {
  .nav__enlaces {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2rem);
  }
  .nav__enlaces a {
    text-decoration: none;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--tinta);
    position: relative;
    padding-block: .35rem;
  }
  .nav__enlaces a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--rojo);
    border-radius: 2px;
    scale: 0 1;
    transform-origin: left;
    transition: scale .3s var(--curva);
  }
  .nav__enlaces a:hover::after,
  .nav__enlaces a[aria-current="true"]::after { scale: 1 1; }
}

.nav__cta { display: none; }
@media (min-width: 1024px) { .nav__cta { display: inline-flex; padding: .6rem 1.35rem; } }

/* Boton hamburguesa */
/* Flex en columna con gap fijo: en grid las filas se estiran y las barras
   quedan demasiado separadas para cruzarse al formar la X. */
.nav__burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  border-radius: var(--r-pastilla);
  background: var(--rojo);
  color: var(--crema);
  flex: none;
}
@media (min-width: 1024px) { .nav__burger { display: none; } }
.nav__burger span:not(.solo-lectores) {
  display: block;
  width: 20px; height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transition: translate .3s var(--resorte), rotate .3s var(--resorte), opacity .2s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { translate: 0 7.5px; rotate: 45deg; }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -7.5px; rotate: -45deg; }

/* Menu movil a pantalla completa */
.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--chicle);
  display: grid;
  align-content: center;
  gap: .35rem;
  padding: var(--nav-h) 1.25rem 2rem;
  opacity: 0;
  visibility: hidden;
  translate: 0 -12px;
  transition: opacity .3s var(--curva), translate .35s var(--curva), visibility .3s;
}
.menu[data-abierto="si"] { opacity: 1; visibility: visible; translate: 0 0; }
/* El :not(.boton) es necesario: el CTA tambien es un <a> dentro del menu y
   sin esto hereda la tipografia script gigante de los enlaces. */
.menu a:not(.boton) {
  text-decoration: none;
  font-family: 'Lobster Two', cursive;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.3rem, 11vw, 3.6rem);
  line-height: 1.15;
  padding-bottom: .06em;
  color: var(--crema);
  text-shadow: .04em .05em 0 var(--rojo);
  width: fit-content;
}
.menu .boton { margin-top: 1.6rem; width: 100%; padding-inline: 1.25rem; }
@media (min-width: 1024px) { .menu { display: none; } }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding-block: calc(var(--nav-h) + 1.5rem) clamp(3rem, 7vw, 4.5rem);
  overflow: hidden;
}
.hero__grid {
  position: relative;
  z-index: 3;
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
  grid-template-areas: "texto" "pieza";
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    grid-template-areas: "texto pieza";
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }
}
.hero__texto { grid-area: texto; }
.hero__pieza { grid-area: pieza; }

.hero__titulo {
  font-size: clamp(3rem, 12.5vw, 8rem);
  color: var(--crema);
  margin-bottom: .55rem;
}
@media (min-width: 900px) { .hero__titulo { font-size: clamp(4.2rem, 7.2vw, 7.4rem); } }

.hero__bajada {
  font-size: clamp(1.0625rem, 2.6vw, 1.3rem);
  font-weight: 500;
  max-width: 34ch;
  margin-bottom: clamp(1.5rem, 4vw, 2.1rem);
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Composicion asimetrica de la pieza destacada */
.hero__pieza { position: relative; display: grid; place-items: center; }
/* En desktop el grupo (disco + foto) se corre hacia el texto: la columna
   derecha quedaba con demasiado aire y la foto pegada al borde. */
@media (min-width: 900px)  { .hero__pieza { translate: -5% 0; } }
@media (min-width: 1150px) { .hero__pieza { translate: -12% 0; } }

/* El disco quedo fuera: en el resto del sitio las fotos van solo con marco
   rojo y sombra dura, y el circulo detras se leia como una mancha suelta.
   Se conserva el elemento en el HTML por si mas adelante se quiere volver. */
.hero__disco { display: none; }
.hero__marco {
  position: relative;
  width: min(76%, 340px);
  rotate: -3.5deg;
  transition: rotate .5s var(--curva);
}
@media (min-width: 900px) { .hero__marco { width: min(92%, 400px); } }
.hero__marco:hover { rotate: -1deg; }

/* --------------------------------------------------------------------------
   10. Marco de foto (todos los placeholders viven aca)
   -------------------------------------------------------------------------- */
.marco {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 5);
  overflow: hidden;
  background: var(--crema);
  border: 3px solid var(--rojo);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--dura) var(--dura) 0 var(--rojo);
}
.marco[data-forma="arco"]    { border-radius: 50% 50% var(--r-tarjeta) var(--r-tarjeta) / 42% 42% var(--r-tarjeta) var(--r-tarjeta); }
.marco[data-forma="circulo"] { border-radius: 50%; }
.marco[data-forma="pastilla"]{ border-radius: var(--r-pastilla); }
.marco > img { width: 100%; height: 100%; object-fit: cover; }

.marco__vacio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .45rem;
  color: var(--chicle);
  background-image: radial-gradient(circle at 50% 50%, rgba(240, 144, 200, .5) 0 2.5px, transparent 3px);
  background-size: 24px 24px;
}
.marco__vacio .estrella { width: clamp(34px, 22%, 72px); height: auto; aspect-ratio: 1; }
.marco__vacio span {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(74, 18, 40, .5);
}

/* --------------------------------------------------------------------------
   11. Marquesina (unica en la pagina)
   -------------------------------------------------------------------------- */
.marquesina {
  position: relative;
  z-index: 3;
  background: var(--rojo);
  color: var(--crema);
  overflow: hidden;
  padding-block: .8rem;
  border-block: 3px solid var(--tinta);
}
.marquesina__pista {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: correr 34s linear infinite;
}
.marquesina__grupo {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3rem);
  padding-right: clamp(1.4rem, 4vw, 3rem);
  font-family: 'Lobster Two', cursive;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.45rem, 4.2vw, 2.3rem);
  line-height: 1.3;
  white-space: nowrap;
}
.marquesina .estrella { width: .68em; height: .68em; }
@keyframes correr { to { translate: -50% 0; } }
.marquesina:hover .marquesina__pista { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   12. Catalogo
   -------------------------------------------------------------------------- */
.catalogo__cabecera { margin-bottom: clamp(2rem, 5vw, 3rem); }
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.4rem;
}
.filtro {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  padding: .55rem 1.25rem;
  border-radius: var(--r-pastilla);
  border: 2.5px solid var(--rojo);
  color: var(--tinta);
  background: transparent;
  transition: background-color .2s var(--curva), color .2s var(--curva), translate .2s var(--curva), box-shadow .2s var(--curva);
}
.filtro:hover { translate: -2px -2px; box-shadow: 4px 4px 0 var(--rojo); }
.filtro[aria-pressed="true"] {
  background: var(--rojo);
  color: var(--crema);
  box-shadow: 4px 4px 0 var(--tinta);
}

.piezas {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  align-items: start;
}

.pieza {
  position: relative;
  display: grid;
  gap: .8rem;
  rotate: var(--rot, 0deg);
  transition: rotate .35s var(--curva), translate .35s var(--curva);
}
.pieza[hidden] { display: none; }
/* Ritmo asimetrico: cada tarjeta se inclina y se desfasa distinto.
   Va por variables para que el JS pueda re-repartirlo al filtrar. */
.pieza:nth-child(4n+1) { --ratio: 4 / 5; --rot: -1.4deg; --desfase: 0rem; }
.pieza:nth-child(4n+2) { --ratio: 1 / 1; --rot: 1deg;    --desfase: 2.4rem; }
.pieza:nth-child(4n+3) { --ratio: 5 / 6; --rot: -.6deg;  --desfase: 0rem; }
.pieza:nth-child(4n)   { --ratio: 4 / 5; --rot: 1.5deg;  --desfase: 1.4rem; }
/* En movil la grilla es una sola columna: sin desfases. */
@media (min-width: 720px) { .pieza { margin-top: var(--desfase, 0); } }
.pieza:hover { rotate: calc(var(--rot, 0deg) - 1.5deg); translate: -4px -7px; }
.pieza:hover .marco { box-shadow: var(--dura-grande) var(--dura-grande) 0 var(--rojo); }
.marco { transition: box-shadow .35s var(--curva); }

.pieza__nombre {
  font-family: 'Lobster Two', cursive;
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  padding-bottom: .06em;
  color: var(--tinta);
}
.pieza__material {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-top: -.55rem;
}
.pieza__material .estrella { width: .85em; height: .85em; color: var(--rojo); }
.pieza .boton { width: 100%; }

.catalogo__nota {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  color: var(--tinta-suave);
}
.sin-resultados {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  font-size: 1.2rem;
  color: var(--tinta-suave);
}

/* --------------------------------------------------------------------------
   13. Cuidados (bento asimetrico sobre rosa chicle)
   -------------------------------------------------------------------------- */
.cuidados__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 820px) {
  .cuidados__grid { grid-template-columns: repeat(6, 1fr); }
  .consejo:nth-child(1) { grid-column: span 4; }
  .consejo:nth-child(2) { grid-column: span 2; }
  .consejo:nth-child(3) { grid-column: span 2; }
  .consejo:nth-child(4) { grid-column: span 4; }
  .cuidados__cierre     { grid-column: 1 / -1; }
}

.consejo {
  position: relative;
  overflow: hidden;
  background: var(--crema);
  border: 3px solid var(--rojo);
  border-radius: var(--r-tarjeta);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  box-shadow: var(--dura) var(--dura) 0 var(--rojo);
  transition: translate .3s var(--curva), box-shadow .3s var(--curva), rotate .3s var(--curva);
}
.consejo:hover { translate: -3px -5px; rotate: -.8deg; box-shadow: var(--dura-grande) var(--dura-grande) 0 var(--rojo); }

/* Variacion real de fondo entre celdas del bento */
/* Trama suave: da textura sin pelearse con la lectura del texto. */
.consejo--trama::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(240, 144, 200, .34) 0 2.5px, transparent 3px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom right, transparent 30%, #000 105%);
  mask-image: linear-gradient(to bottom right, transparent 30%, #000 105%);
  pointer-events: none;
}
.consejo--arco::before {
  content: "";
  position: absolute;
  right: -16%;
  bottom: -46%;
  width: 66%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--chicle);
  pointer-events: none;
}
.consejo > * { position: relative; z-index: 1; }

.consejo__icono {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--chicle);
  color: var(--rojo);
  margin-bottom: 1rem;
}
.consejo--arco .consejo__icono { background: var(--crema); border: 2.5px solid var(--rojo); }
.consejo__icono .icono { width: 28px; height: 28px; }

.consejo__titulo {
  font-family: 'Lobster Two', cursive;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 1.95rem);
  line-height: 1.15;
  padding-bottom: .06em;
  color: var(--rojo);
  margin-bottom: .35rem;
}
.consejo p { color: var(--tinta); max-width: 44ch; }

.cuidados__cierre {
  font-size: clamp(1.9rem, 5.6vw, 3.4rem);
  color: var(--crema);
  text-align: center;
  padding-top: clamp(.5rem, 2vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   14. Sobre Kala
   -------------------------------------------------------------------------- */
.sobre__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .sobre__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}
.sobre__retrato { position: relative; width: min(100%, 400px); justify-self: center; }
.sobre__retrato .marco { rotate: 2.5deg; transition: rotate .45s var(--curva), box-shadow .35s var(--curva); }
.sobre__retrato:hover .marco { rotate: -1deg; }

.sobre__texto p + p { margin-top: 1.05rem; }
.sobre__texto p { max-width: 54ch; font-size: clamp(1.0625rem, 2.2vw, 1.18rem); }
.sobre__texto .titulo-seccion { margin-bottom: 1.2rem; }
.sobre__texto .sobre__firma {
  font-family: 'Lobster Two', cursive;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.15;
  padding-bottom: .08em;
  color: var(--chicle);
  text-shadow: .04em .05em 0 var(--rojo);
  margin-top: 1.3rem;
}

/* --------------------------------------------------------------------------
   15. Instagram
   -------------------------------------------------------------------------- */
/* Instagram cae despues de Sobre Kala y las dos van sobre fondo palido.
   Una trama de lunares rosas la separa sin meter un cuarto color de bloque.
   Es una franja corta (titulo, bajada y boton), asi que lleva menos aire
   arriba y abajo que una seccion normal: con el --salto completo quedaba
   demasiado vacia. */
.instagram {
  background-color: var(--palo);
  background-image: radial-gradient(circle at 50% 50%, rgba(240, 144, 200, .3) 0 3px, transparent 3.5px);
  background-size: 30px 30px;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.ig__cabecera {
  display: grid;
  gap: 1rem;
  justify-items: start;
}
/* DORMIDO: la grilla de publicaciones se saco del HTML porque eran cuadros
   vacios. Estos estilos quedan listos para cuando se conecte el feed real o
   se peguen las fotos a mano (ver README.md, seccion "Feed de Instagram").
   Para volver a usarlos hay que reponer el <div class="ig__grid"> dentro de
   la seccion #instagram. */
.ig__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.7rem, 2vw, 1.2rem);
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
@media (min-width: 720px)  { .ig__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .ig__grid { grid-template-columns: repeat(6, 1fr); } }

.ig__post {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-chica);
  border: 3px solid var(--rojo);
  background: var(--crema);
  transition: rotate .3s var(--curva), translate .3s var(--curva), box-shadow .3s var(--curva);
}
.ig__post:nth-child(odd)  { rotate: -1.2deg; }
.ig__post:nth-child(even) { rotate: 1.2deg; }
.ig__post:hover, .ig__post:focus-visible { rotate: -3deg; translate: -3px -5px; box-shadow: 9px 9px 0 var(--rojo); }
.ig__post img { width: 100%; height: 100%; object-fit: cover; }

.ig__capa {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(232, 72, 40, .9);
  color: var(--crema);
  opacity: 0;
  transition: opacity .28s var(--curva);
}
.ig__post:hover .ig__capa,
.ig__post:focus-visible .ig__capa { opacity: 1; }
.ig__capa .icono { width: 34px; height: 34px; }

/* --------------------------------------------------------------------------
   16. Contacto y pie
   -------------------------------------------------------------------------- */
.contacto { text-align: center; }
.contacto .contenedor { display: grid; justify-items: center; }
.contacto__numero {
  display: inline-block;
  font-family: 'Lobster Two', cursive;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.65rem, 8.4vw, 5.4rem);
  line-height: 1.12;
  padding-bottom: .08em;
  color: var(--crema);
  text-shadow: .04em .05em 0 var(--rojo);
  text-decoration: none;
  margin-block: .4rem 1.6rem;
  max-width: 100%;
  transition: rotate .35s var(--curva), scale .35s var(--curva);
}
.contacto__numero:hover { rotate: -1.6deg; scale: 1.02; }

.contacto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
}
.contacto__datos {
  display: grid;
  gap: .55rem;
  margin-top: clamp(2.4rem, 6vw, 3.4rem);
  justify-items: center;
  font-weight: 500;
  color: var(--tinta);
}
.contacto__datos p { max-width: 44ch; }

.pie {
  padding-block: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: .95rem;
  color: var(--tinta-suave);
}
.pie img { width: 96px; }

/* --------------------------------------------------------------------------
   17. Movimiento
   -------------------------------------------------------------------------- */
/* Sin JS todo se ve; con JS aparece al hacer scroll. */
.js .reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .7s var(--curva), translate .7s var(--curva);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.visible { opacity: 1; translate: 0 0; }

.js .deco {
  opacity: 0;
  scale: .2;
  rotate: -80deg;
  transition: opacity .5s var(--curva), scale .6s var(--resorte), rotate .6s var(--resorte);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js .deco.visible { opacity: 1; scale: 1; rotate: 0deg; }

.hero__entrada > * {
  animation: entrar .85s var(--curva) both;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}
@keyframes entrar {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Titileo perpetuo de las estrellitas, una vez que aparecieron */
  .js .deco.visible .estrella {
    animation: titilar 4.2s ease-in-out infinite;
    animation-delay: calc(700ms + var(--i, 0) * 320ms);
  }
  @keyframes titilar {
    0%, 100% { scale: 1; rotate: 0deg; }
    50%      { scale: .74; rotate: 24deg; }
  }

  /* Parallax nativo por scroll, sin listeners de scroll */
  @supports (animation-timeline: view()) {
    .parallax {
      animation: flotar linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes flotar {
      from { translate: 0 var(--px, 70px); }
      to   { translate: 0 calc(var(--px, 70px) * -1); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .deco {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    translate: none;
    transition: none;
  }
  .hero__entrada > * { animation: none; }
  .marquesina__pista { animation: none; }
  .marco, .pieza, .consejo, .ig__post, .boton, .hero__marco,
  .sobre__retrato .marco, .contacto__numero, .filtro { transition: none; }
  .pieza:hover, .consejo:hover, .ig__post:hover { rotate: 0deg; translate: none; }
}

/* --------------------------------------------------------------------------
   18. Variante accesible de los titulares (desactivada)

   Los titulares grandes usan el par de colores de la identidad: rosa chicle
   sobre fondo palido y crema sobre rosa chicle. Es lo que hace el logo, y la
   sombra dura roja los sostiene bien en pantalla, pero medido como relleno
   solo quedan entre 1.97:1 y 2.03:1, por debajo del 3:1 que pide WCAG AA
   para texto grande. Todo el texto de lectura de la pagina si cumple AA.

   Si en algun momento se necesita cumplir AA tambien en los titulares,
   descomentar este bloque: invierte relleno y sombra y sube a 3.49:1 sobre
   palido y 6.77:1 sobre rosa, sin salirse de la paleta.

.titulo-seccion,
.sobre__texto .sobre__firma {
  color: var(--rojo);
  text-shadow: .04em .05em 0 var(--chicle);
}
.hero__titulo,
.bloque-rosa .titulo-seccion,
.cuidados__cierre,
.contacto__numero,
.menu a {
  color: var(--tinta);
  text-shadow: .04em .05em 0 var(--crema);
}
   -------------------------------------------------------------------------- */