/* =====================================================================
   La Sesión Cafetería · versión 3 "la taza vista desde arriba"
   Un solo motivo: el círculo de la taza turquesa. Marca el plato del
   inicio, la máscara de cada foto, los botones, las viñetas de la carta,
   las muescas del cupón y el sello del pie.
   ===================================================================== */
:root {
  /* Colores de la marca, sacados de su Instagram (material/instagram) */
  --fondo: #f4efdd;        /* crema cálida: el fondo de la página */
  --fondo-2: #e4dcb8;      /* arena: el tono claro dominante de sus fotos */
  --tinta: #2b2413;        /* café oliva casi negro: todo el texto */
  --tinta-suave: #574c33;
  --turquesa: #2e8ba6;     /* la taza: el motivo, siempre grande */
  --turquesa-tinta: #1f6c84; /* turquesa para botones con texto blanco */
  --oliva: #444422;        /* el oliva de su marca */
  --salvia: #8c8c80;
  --madera: #6b3a17;       /* la mesa de madera de sus fotos */
  --madera-2: #84502a;     /* un paso de tono sobre la madera */
  --madera-texto: #dccaa6; /* texto secundario sobre madera */
  /* Mesa de cafetería: foto de madera teñida en sus cafés, con un velo café para que el texto se lea */
  --mesa: linear-gradient(rgba(74, 38, 13, .55), rgba(74, 38, 13, .55)), url("img/madera.webp") center / cover, #6b3a17;
  /* Vinilo: surcos finos alrededor del centro */
  --vinilo: repeating-radial-gradient(circle at center, #15110d 0 2px, #241d17 2.5px 3.5px, #15110d 4px 6px);
  --crema: #f4efdd;

  --letra: "Schibsted Grotesk", system-ui, sans-serif;
  --paso-chico: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --paso-texto: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --paso-guia: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --paso-titulo: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --paso-portada: clamp(4rem, 1.2rem + 7.6vw, 8.75rem);

  --margen: clamp(16px, 3vw, 40px);
  --entre: clamp(96px, 12vw, 200px);
  --barra: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 56px); }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 var(--paso-texto)/1.45 var(--letra);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.05em; line-height: 0.92; }
h2 { font-size: var(--paso-titulo); }
h3 { font-size: var(--paso-guia); letter-spacing: -0.03em; line-height: 1.05; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; }
.marco { width: calc(100% - 2 * var(--margen)); max-width: 1360px; margin-inline: auto; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Botones: un círculo estirado, una sola forma en toda la página ===== */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: 999px;
  background: var(--turquesa-tinta); color: #fff;
  font: 600 var(--paso-texto) var(--letra); text-decoration: none; white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease;
}
.boton:hover { transform: translateY(-2px); background: #185a6e; }
.boton:active { transform: scale(.97); }
.boton--chico { min-height: 44px; padding: 0 20px; font-size: var(--paso-chico); }
.boton--crema { background: var(--crema); color: var(--oliva); }
.boton--crema:hover { background: #fff; }
.enlace { font-weight: 600; text-underline-offset: 5px; }
.enlace:hover { color: var(--turquesa-tinta); }

/* ===== Barra ===== */
.barra { position: sticky; top: 0; z-index: 40; background: var(--fondo); }
.barra__fila { height: var(--barra); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marca { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: var(--paso-guia); letter-spacing: -0.04em; text-decoration: none; }
.marca__taza { width: 34px; height: 34px; border-radius: 50%; background: var(--oliva); border: 7px solid var(--turquesa); flex: none; }
.barra__links { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.barra__links a { font-weight: 600; text-decoration: none; transition: color .2s; }
.barra__links a:hover { color: var(--turquesa-tinta); }

/* ===== 1. La taza (portada) ===== */
.taza { background: var(--fondo-2); position: relative; min-height: calc(100svh - var(--barra)); display: flex; align-items: center; overflow: hidden; padding: 48px 0; }
.taza__plato {
  position: absolute; top: 50%; left: 50vw;
  width: max(104vh, 720px); aspect-ratio: 1; border-radius: 50%;
  background: var(--vinilo); display: grid; place-items: center;
  transform: translateY(-50%);
}
.taza__borde { position: relative; width: 48%; aspect-ratio: 1; border-radius: 50%; background: var(--turquesa); display: grid; place-items: center; }
.taza__cafe { position: relative; width: 84%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--oliva); }
.taza__cafe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.taza__cafe img.activa { opacity: 1; }
.taza__cafe img:first-child { opacity: 1; }
.js .taza__cafe img:first-child:not(.activa) { opacity: 0; }
.taza__texto { position: relative; }
.taza h1 { font-size: var(--paso-portada); max-width: 6.2em; }
.taza__bajada { font-size: var(--paso-guia); line-height: 1.3; max-width: 30ch; margin-top: 40px; }
.taza__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }
.estado { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.estado::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--turquesa); }
.estado.cerrado::before { background: var(--salvia); }

/* ===== 2. Tu sesión de ahora ===== */
.ahora { background: var(--mesa); color: var(--crema); }
.ahora__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; }
.ahora__foto { display: grid; place-items: center; padding: 64px 40px 64px 0; }
.ahora__plato { position: relative; width: min(100%, 600px); aspect-ratio: 1; border-radius: 50%; background: var(--vinilo); display: grid; place-items: center; }
.ahora__plato img { width: 52%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 16px solid var(--turquesa); transition: opacity .35s ease; }
.ahora__plato img.cambiando { opacity: 0; }
.ahora__texto { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 140px 0 72px 40px; }
.momentos { display: flex; gap: 32px; }
.momentos button {
  font: 600 var(--paso-guia) var(--letra); letter-spacing: -0.03em; color: var(--madera-texto);
  background: none; border: 0; padding: 0 0 0 22px; cursor: pointer; position: relative; transition: color .2s;
}
.momentos button::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--madera-texto); transition: background-color .2s, transform .2s; }
.momentos button[aria-selected="true"] { color: var(--crema); }
.momentos button[aria-selected="true"]::before { background: var(--turquesa); transform: scale(1.25); }
.momentos button:hover { color: var(--crema); }
.momento h3 { font-size: var(--paso-titulo); letter-spacing: -0.05em; line-height: 0.92; }
.momento p { max-width: 38ch; margin-top: 32px; }
.momento .momento__cuenta { font-size: var(--paso-guia); margin-top: 24px; }
.ahora__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.celda {
  display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 0 16px;
  background: var(--madera-2); color: var(--crema); font-weight: 600; text-decoration: none; text-align: center; transition: transform .2s, background-color .2s;
}
.celda--tinta { background: var(--crema); color: var(--madera); }
.celda:hover { transform: translateY(-2px); }

/* ===== 3. La carta ===== */
.carta { padding: var(--entre) 0; }
.carta__indice {
  position: sticky; top: var(--barra); z-index: 5; background: var(--fondo);
  display: flex; gap: 8px 28px; flex-wrap: wrap; padding: 20px 0; margin-top: 32px;
}
.carta__indice a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; transition: color .2s; }
.carta__indice img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 3px solid var(--turquesa); transition: transform .25s cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) { .carta__indice a:hover img { transform: scale(1.08); } }
.carta__indice a:hover { color: var(--turquesa-tinta); }
.categoria { margin-top: 96px; }
.categoria:nth-of-type(even) { background: var(--fondo-2); padding: clamp(32px, 4vw, 64px) clamp(20px, 4vw, 56px); }
.categoria__cabeza { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(20px, 3vw, 40px); margin-bottom: 48px; }
.categoria__foto { width: clamp(112px, 13vw, 184px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 16px solid #17120e; outline: 5px solid var(--turquesa); outline-offset: -21px; }
.categoria__cabeza h3 { font-size: var(--paso-titulo); letter-spacing: -0.05em; line-height: 0.92; }
.categoria__cabeza span { display: block; margin-top: 14px; color: var(--tinta-suave); }
.categoria h4 { font-size: var(--paso-texto); letter-spacing: -0.01em; line-height: 1.3; color: var(--tinta-suave); margin: 48px 0 24px; }
.categoria__nota { margin: -16px 0 32px; color: var(--tinta-suave); }
.platos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 28px 56px; }
.platos li { display: grid; grid-template-columns: 76px 1fr auto; gap: 20px; align-items: center; }
.platos li img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: var(--fondo-2); }
.platos li.propia img { outline: 3px solid var(--turquesa); outline-offset: 2px; }
.platos li.sin-foto, .platos--extras li { grid-template-columns: 76px 1fr auto; }
.platos--extras { gap: 18px 64px; }
.platos li.sin-foto::before, .platos--extras li::before { content: ""; justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--turquesa); }
.platos span { font-weight: 600; }
.platos small { display: block; font-weight: 400; font-size: var(--paso-texto); line-height: 1.35; color: var(--tinta-suave); margin-top: 4px; max-width: 38ch; }
.platos b { font-weight: 800; font-variant-numeric: tabular-nums; }
.categoria--almuerzo { background: var(--fondo-2); padding: 56px clamp(20px, 4vw, 56px); }
.carta__fuente { margin-top: 64px; color: var(--tinta-suave); max-width: 60ch; }

/* ===== 4. La mesa (banda oliva) ===== */
.mesa { overflow-x: clip; background: var(--oliva); color: var(--crema); padding: var(--entre) 0 48px; }
.mesa__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.mesa__texto p { max-width: 36ch; margin: 32px 0 40px; }
.mesa__marco { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mesa__taza {
  position: relative; width: min(40vw, 540px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 0; padding: 0; background: var(--vinilo); cursor: pointer;
}
.mesa__taza img { position: absolute; inset: 24%; width: 52%; height: 52%; border-radius: 50%; outline: 10px solid var(--turquesa); object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.mesa__taza img.activa, .mesa__taza img:first-child { opacity: 1; }
.js .mesa__taza img:first-child:not(.activa) { opacity: 0; }
.mesa__marco figcaption { font-size: var(--paso-chico); text-align: center; min-height: 1.5em; }
.mesa__nota { font-size: var(--paso-chico); margin-top: 64px; }

/* ===== 5. Opiniones ===== */
.opiniones { padding: var(--entre) 0; }
.opiniones__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
.opiniones__foto { grid-column: 1 / span 5; }
.opiniones__foto img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.opiniones__texto { grid-column: 7 / -1; padding-top: 120px; }
.cita { margin: 48px 0 0; }
.cita p { font-size: var(--paso-guia); line-height: 1.25; max-width: 28ch; }
.cita footer, .citas footer { margin-top: 20px; font-weight: 600; }
.citas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 64px; }
.citas blockquote { margin: 0; }
.citas footer { margin-top: 12px; }
.opiniones__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 56px; }

/* ===== 6. Preguntas: fichas con pestaña ===== */
.preguntas { background: var(--fondo-2); padding: var(--entre) 0; }
.preguntas__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 0 48px; align-items: start; }
.preguntas__grid > div:first-child { position: sticky; top: calc(var(--barra) + 40px); }
.preguntas__intro { max-width: 26ch; margin-top: 32px; }
.preguntas__foto { width: min(100%, 300px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; margin-top: 48px; }
.fichas { padding-top: 40px; }
.ficha { --color: var(--turquesa-tinta); --texto: #fff; position: relative; margin-top: 40px; background: var(--color); color: var(--texto); }
.ficha:nth-child(3n+2) { --color: var(--madera); --texto: var(--crema); background: var(--mesa); }
.ficha:nth-child(3n+3) { --color: var(--oliva); --texto: var(--crema); }
.ficha summary { list-style: none; cursor: pointer; padding: 32px clamp(20px, 3vw, 40px); }
.ficha summary::-webkit-details-marker { display: none; }
.ficha__tema {
  position: absolute; top: -40px; left: calc(var(--i, 0) * 150px); width: 200px; height: 40px;
  display: flex; align-items: center; padding: 0 24px; background: var(--color);
  border-radius: 20px 20px 0 0; font-size: var(--paso-chico); font-weight: 600;
}
.ficha:nth-child(2) { --i: 1; } .ficha:nth-child(3) { --i: 2; } .ficha:nth-child(4) { --i: 3; } .ficha:nth-child(5) { --i: 4; }
.ficha__pregunta { font-size: var(--paso-guia); font-weight: 600; letter-spacing: -0.03em; }
.ficha p { padding: 0 clamp(20px, 3vw, 40px) 36px; max-width: 50ch; }
.ficha summary:hover .ficha__pregunta { text-decoration: underline; text-underline-offset: 5px; }

/* ===== 7. Visítanos: cupón ===== */
.visitanos { padding: var(--entre) 0; }
.cupon { position: relative; display: grid; grid-template-columns: 46% 54%; background: var(--turquesa-tinta); color: #fff; }
.cupon::before, .cupon::after { /* muescas redondas, como mordiscos de la taza */
  content: ""; position: absolute; left: 46%; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: var(--fondo);
}
.cupon::before { top: -22px; }
.cupon::after { bottom: -22px; }
.cupon__datos { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.cupon__datos h2 { max-width: 9em; }
.horario { margin: 0; display: grid; gap: 10px; }
.horario div { display: flex; justify-content: space-between; gap: 16px; max-width: 360px; }
.horario dt { font-weight: 600; }
.horario dd { margin: 0; }
.cupon__form { display: flex; flex-direction: column; gap: 10px; padding: clamp(32px, 4vw, 64px); border-left: 6px dotted var(--fondo); }
.cupon__titulo { font-size: var(--paso-guia); font-weight: 600; letter-spacing: -0.03em; margin-bottom: 14px; }
.cupon__form input {
  height: 54px; padding: 0 18px; border: 0; border-radius: 0; background: #2d7f98; color: #fff;
  font: 400 var(--paso-texto) var(--letra);
}
.cupon__form input::placeholder { color: #e3f1f5; }
.cupon__enviar {
  height: 58px; margin-top: 6px; border: 0; background: var(--tinta); color: var(--crema);
  font: 600 var(--paso-texto) var(--letra); cursor: pointer; transition: transform .2s, background-color .2s;
}
.cupon__enviar:hover { background: #000; transform: translateY(-2px); }
.mapa { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: 120px; }
.mapa__circulo { width: clamp(280px, 34vw, 460px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--fondo-2); }
.mapa__circulo iframe { width: 100%; height: 100%; border: 0; }
.mapa__texto p { max-width: 34ch; margin: 24px 0 32px; }

/* ===== Pie: el sello, en grande ===== */
.pie { background: var(--mesa); color: var(--crema); padding: 120px 0 48px; }
.pie__sello { width: min(100%, 34svh * 1.6, 520px); }
.pie__sello svg { width: 100%; height: auto; display: block; }
.pie__columnas { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; margin-top: 56px; }
.pie__columnas nav { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.pie a { text-decoration: none; }
.pie nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.pie__final { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 64px; font-size: var(--paso-chico); }
.pie .boton { background: var(--crema); color: var(--madera); }

/* ===== Borrador: lo que falta confirmar se marca en amarillo ===== */
.borrador [data-pendiente] { outline: 3px dashed #d9a400; outline-offset: 4px; position: relative; }
.borrador [data-pendiente]::after {
  content: "Pendiente: " attr(data-pendiente); position: absolute; top: -14px; right: 8px; z-index: 6;
  background: #ffd23f; color: #241c00; font: 600 13px/1.2 var(--letra); padding: 4px 8px; white-space: nowrap; pointer-events: none;
}
.borrador .marca[data-pendiente]::after { top: auto; bottom: -26px; right: auto; left: 0; }

/* ===== Movimiento: entradas por partes, solo si hay JS ===== */
.js .entra { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--retraso, 0s); }
.js .entra.visible { opacity: 1; transform: none; }
.js .taza__plato.entra { transform: translateY(-50%) scale(.92); }
.js .taza__plato.entra.visible { transform: translateY(-50%) scale(1); }
.taza__cafe img.activa { animation: acerca 7s ease-out both; }
@keyframes acerca { from { transform: scale(1.08); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .entra { opacity: 1; transform: none; }
  .js .taza__plato.entra { transform: translateY(-50%); }
}

/* ===== Tablet ===== */
@media (max-width: 1000px) {
  .barra__links { display: none; }
  .ahora__grid, .mesa__grid { grid-template-columns: 1fr; }
  .ahora__foto { padding: 56px 0 0; }
  .ahora__texto { padding: 48px 0 64px; }
  .mesa__taza { width: min(72vw, 480px); }
  .opiniones__foto { grid-column: 1 / span 5; }
  .opiniones__texto { grid-column: 6 / -1; padding-top: 48px; }
  .citas { grid-template-columns: 1fr; }
  .preguntas__grid { grid-template-columns: 1fr; }
  .preguntas__grid > div:first-child { position: static; }
  .preguntas__foto { display: none; }
  .ficha__tema { width: 160px; left: calc(var(--i, 0) * 100px); }
  .cupon { grid-template-columns: 1fr; }
  .cupon::before, .cupon::after { left: auto; top: auto; margin: 0; }
  .cupon::before { left: -22px; bottom: calc(var(--alto-form, 400px) - 22px); }
  .cupon::after { right: -22px; bottom: calc(var(--alto-form, 400px) - 22px); }
  .cupon__form { border-left: 0; border-top: 6px dotted var(--fondo); }
}

/* ===== Celular: su propia composición ===== */
@media (max-width: 760px) {
  :root { --barra: 64px; }
  .taza { display: block; min-height: 0; padding: 0 0 72px; }
  .taza__plato { position: relative; top: auto; left: 18vw; width: 118vw; transform: none; margin-top: -14vw; margin-bottom: 32px; }
  .js .taza__plato.entra, .js .taza__plato.entra.visible { transform: none; }
  .taza__bajada { margin-top: 32px; }
  .taza__acciones .boton { width: 100%; }
  .ahora__texto { gap: 32px; }
  .momentos { gap: 20px; flex-wrap: wrap; }
  .momentos button { font-size: var(--paso-texto); }
  .ahora__acciones { grid-template-columns: 1fr; }
  .celda { min-height: 60px; }
  .carta__indice { position: static; gap: 10px 20px; padding: 14px 0; }
  .categoria { margin-top: 72px; }
  .categoria__cabeza h3 { font-size: 8.5vw; }
  .platos { grid-template-columns: 1fr; gap: 22px; }
  .platos li, .platos li.sin-foto, .platos--extras li { grid-template-columns: 52px 1fr auto; gap: 14px; }
  .platos li img { width: 52px; height: 52px; }
  .carta__indice img { width: 36px; height: 36px; }
  .platos li.sin-foto::before, .platos--extras li::before { width: 12px; height: 12px; }
  .mesa__grid { gap: 48px; }
  .opiniones__grid { display: block; }
  .opiniones__foto { width: 72%; }
  .opiniones__texto { padding-top: 40px; }
  .ficha__tema { width: 120px; left: calc(var(--i, 0) * 48px); padding: 0 16px; }
  .mapa { grid-template-columns: 1fr; margin-top: 80px; }
  .mapa__circulo { width: 100%; max-width: 360px; }
  .pie__columnas { grid-template-columns: 1fr; }
  .pie__final { flex-wrap: wrap; }
}

/* ===== El perrito pet friendly: líneas blancas, salta de título en título ===== */
.perrito {
  --ancho: 132px;
  position: absolute; left: 0; top: 0; z-index: 20;
  width: var(--ancho); padding: 0; border: 0; background: none; cursor: pointer;
  opacity: 0; transition: opacity .4s ease;
}
.perrito.listo { opacity: 1; }
/* Las líneas son blancas; un contorno oscuro finito las hace legibles sobre los fondos claros (no es sombra decorativa) taste-skill-ignore */
.perrito__dibujo { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 1.2px #2b2413) drop-shadow(0 0 1.2px #2b2413) drop-shadow(0 0 .6px #2b2413); transition: transform .35s cubic-bezier(.4, 0, .2, 1); } /* taste-skill-ignore: contorno del perrito */
.perrito__salto { display: block; transform-origin: 50% 92%; }
.perrito.izquierda .perrito__dibujo { transform: scaleX(-1); }
.perrito__pata, .perrito__cola, .perrito__oreja { transform-box: fill-box; }
.perrito__pata { transform-origin: 50% 0; transition: transform .28s cubic-bezier(.3, .7, .4, 1); }
.perrito__cola { transform-origin: 100% 100%; animation: cola 1.1s ease-in-out infinite alternate; }
.perrito__oreja { transform-origin: 70% 0; transition: transform .45s cubic-bezier(.3, .8, .3, 1.2); }
/* En el aire: patas recogidas, orejas al viento */
.perrito.saltando .perrito__pata--a { transform: rotate(-38deg); }
.perrito.saltando .perrito__pata--b { transform: rotate(32deg); }
.perrito.saltando .perrito__oreja { transform: rotate(-22deg); }
.perrito.saltando .perrito__cola { animation-duration: .18s; }
/* Saludo: levanta una pata delantera */
.perrito.saluda .perrito__pata--saluda { animation: saludo .45s ease-in-out 5 alternate; transform-origin: 50% 0; }
@keyframes cola { from { transform: rotate(-14deg); } to { transform: rotate(18deg); } }
@keyframes saludo { from { transform: rotate(0); } to { transform: rotate(-110deg); } }
.perrito__globo {
  position: absolute; bottom: 62%; left: calc(100% + 4px); transform: translate(-6px, 0);
  width: max-content; max-width: min(230px, 38vw); background: var(--crema); color: var(--tinta);
  font: 600 var(--paso-chico)/1.3 var(--letra); text-align: center;
  padding: 10px 16px; border-radius: 22px; opacity: 0; pointer-events: none;
  outline: 3px solid var(--tinta); transition: opacity .25s, transform .25s;
}
.perrito:hover .perrito__globo, .perrito:focus-visible .perrito__globo, .perrito.habla .perrito__globo { opacity: 1; transform: none; }
.perrito.globo-izq .perrito__globo { left: auto; right: calc(100% + 4px); transform: translate(6px, 0); }
.perrito.globo-izq:hover .perrito__globo, .perrito.globo-izq.habla .perrito__globo { transform: none; }
@media (max-width: 760px) {
  .perrito { --ancho: 96px; }
  .perrito__globo { max-width: 180px; }
}

/* Sentado (en el inicio): el torso se endereza desde la cadera, las patas traseras se doblan hacia
   adelante, la cola descansa en el suelo y saluda con la pata delantera cada par de segundos */
.perrito__torso { transform-box: view-box; transform-origin: 46px 76px; transition: transform .45s cubic-bezier(.3, .7, .3, 1); }
.perrito__salto { transition: translate .45s cubic-bezier(.3, .7, .3, 1); }
.perrito.sentado .perrito__salto { translate: 0 11px; }
.perrito.sentado .perrito__torso { transform: rotate(-22deg); }
.perrito.sentado .perrito__pata--trasera { transform: rotate(-78deg); }
.perrito.sentado .perrito__pata--delantera { transform: rotate(22deg); }
.perrito.sentado .perrito__cola { animation-name: cola-sentado; }
.perrito.sentado .perrito__pata--saluda { animation: saludo-sentado 2.8s ease-in-out .5s infinite; }
@keyframes cola-sentado { from { transform: rotate(-82deg); } to { transform: rotate(-58deg); } }
@keyframes saludo-sentado {
  0%, 52%, 100% { transform: rotate(22deg); }
  10%, 30% { transform: rotate(-118deg); }
  20%, 40% { transform: rotate(-88deg); }
}

/* Créditos de fotos referenciales (pie) */
.creditos { margin-top: 40px; font-size: var(--paso-chico); }
.creditos a { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Tocadiscos: los círculos son vinilos que giran; brazo con aguja y notas que salen ===== */
@keyframes gira { to { transform: rotate(360deg); } }
.taza__plato::before, .ahora__plato::before, .mesa__taza::before { /* brillo del vinilo: gira con el disco; la foto del centro queda quieta */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, .11) 12%, transparent 18% 50%, rgba(255, 255, 255, .08) 62%, transparent 68%);
  animation: gira 7s linear infinite;
}
.taza__borde::after, .ahora__plato::after { /* el agujero del centro */
  content: ""; position: absolute; left: 50%; top: 50%; width: 3.2%; aspect-ratio: 1; margin: -1.6% 0 0 -1.6%;
  border-radius: 50%; background: var(--fondo); z-index: 2;
}
.taza__borde::after { width: 7%; margin: -3.5% 0 0 -3.5%; }
.mesa__taza img { z-index: 2; }
.brazo { position: absolute; z-index: 3; right: 1%; top: -3%; width: 30%; height: auto; aspect-ratio: 200 / 260; transform-origin: 80% 13%; animation: aguja 3.2s ease-in-out infinite alternate; }
.taza__plato .brazo { right: 36%; top: 1%; width: 20%; } /* en el inicio el disco se corta a la derecha: el brazo va donde se ve */
@keyframes aguja { from { transform: rotate(-1deg); } to { transform: rotate(1.2deg); } }
.notas { position: absolute; z-index: 3; right: 32%; top: 22%; width: 12%; height: 30%; pointer-events: none; }
.taza__plato .notas { right: 52%; top: 14%; width: 7%; }
.notas svg { position: absolute; bottom: 0; left: 0; width: 34%; aspect-ratio: 24 / 32; opacity: 0; animation: nota 3.6s ease-out infinite; }
.notas svg:nth-child(2) { left: 45%; animation-delay: 1.2s; width: 26%; }
.notas svg:nth-child(3) { left: 15%; animation-delay: 2.4s; width: 30%; }
@keyframes nota {
  0% { opacity: 0; transform: translate(0, 0) rotate(-8deg); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(-60%, -260%) rotate(10deg); }
}
/* Anillo de texto alrededor de la foto, como la etiqueta de un vinilo: gira (la foto no) */
.anillo { position: absolute; left: 50%; top: 50%; width: 74%; aspect-ratio: 1; translate: -50% -50%; z-index: 2; pointer-events: none; animation: gira 18s linear infinite; overflow: visible; }
.ahora__plato .anillo { width: 84%; }
.anillo text { fill: #f4efdd; font: 600 8.5px var(--letra); letter-spacing: 2.4px; }