/* Taza Volcán · concepto WEBO · cafetería de especialidad, Soho de Málaga.
   Colorido y atrevido, pero ordenado: cobalto, tomate y mantequilla sobre crema.
   Formas: celdas con radio 28 px, botones en píldora, taza y pegatinas en círculo.
   Movimiento (8/10, 20/10/2026): alegre y con carácter, nunca blando. Momento firma (taza-volcan.js): las letras del
   titular saltan a su sitio, la taza entra girando sobre la mesa, su vapor se dibuja en bucle lento (se para fuera
   de pantalla) y la pegatina se estampa. Al bajar, la carta se reparte como naipes, el toldo se despliega y las
   celdas se inclinan bajo el ratón. Sin movimiento: todo quieto y entero, con el vapor dibujado. */

@font-face { font-family: "Unbounded"; src: url("/assets/fonts/conceptos/unbounded-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/assets/fonts/conceptos/unbounded-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("/assets/fonts/conceptos/familjen-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("/assets/fonts/conceptos/familjen-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --cobalto: #2340D9;
  --tomate: #FF5A3C;
  --mantequilla: #FFD45C;
  --crema: #FFF7E8;
  --tinta: #12133A;
  --crema-2: #F6E9CF;
  --display: "Unbounded", "Arial Black", ui-sans-serif, sans-serif;
  --texto: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --radio: 28px;
  --margen: clamp(16px, 4vw, 56px);
  --ancho: 1360px;
  color-scheme: light;
}

body {
  background: var(--crema);
  color: var(--tinta);
  font: 400 1.0625rem/1.55 var(--texto);
  font-kerning: normal;
}
::selection { background: var(--mantequilla); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.tv-cabecera :focus-visible, .tv-hero :focus-visible, .tv-pie :focus-visible { outline-color: var(--mantequilla); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.tv-saltar {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  padding: 10px 16px; border-radius: 999px;
  background: var(--mantequilla); color: var(--tinta); font-weight: 600; text-decoration: none;
}
.tv-saltar:focus-visible { top: 12px; }

/* ---------- Cabecera ---------- */
.tv-cabecera { background: var(--cobalto); color: var(--crema); }
.tv-cabecera-in {
  max-width: var(--ancho); margin: 0 auto;
  padding: 18px var(--margen);
  display: flex; align-items: center; gap: 28px;
}
.tv-marca {
  display: inline-flex; align-items: center; gap: 12px;
  font: 800 1.05rem/1 var(--display); letter-spacing: -.01em;
  text-decoration: none;
}
.tv-marca svg { flex: none; }
.tv-nav { margin-left: auto; }
.tv-nav ul { display: flex; gap: 32px; }
.tv-nav a {
  font-weight: 600; text-decoration: none;
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.tv-llegar {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; box-shadow: inset 0 0 0 2px var(--crema);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease);
}
.tv-llegar:active { transform: scale(.97); }

/* ---------- Portada ---------- */
.tv-hero { background: var(--cobalto); color: var(--crema); overflow: clip; }
.tv-hero-in {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(16px, 3vw, 40px) var(--margen) clamp(56px, 7vw, 96px);
  min-height: calc(100svh - 80px);
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center; gap: clamp(24px, 4vw, 56px);
}
.tv-titulo {
  font: 800 clamp(3.5rem, 9vw, 8.25rem)/.84 var(--display);
  letter-spacing: -.03em; text-transform: uppercase;
}
.tv-titulo span { display: block; }
.tv-titulo .tv-pal { white-space: nowrap; } /* al partirlo en letras (taza-volcan.js), que ninguna palabra se corte */
.tv-entrada {
  margin-top: clamp(28px, 3vw, 40px);
  max-width: 30ch; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4;
  text-wrap: pretty;
}
.tv-boton {
  margin-top: clamp(28px, 3vw, 40px);
  display: inline-flex; align-items: center; min-height: 58px; padding: 0 30px;
  border-radius: 999px; background: var(--mantequilla); color: var(--tinta);
  font: 800 1rem/1 var(--display); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 28px -14px rgb(10 14 60 / .7);
  transition: transform 160ms var(--ease), background-color 200ms ease, box-shadow 200ms ease;
}
.tv-boton:active { transform: scale(.97); }

.tv-hero-taza { position: relative; justify-self: end; width: min(100%, 600px); }

/* Marcador de la taza vista desde arriba: mesa tomate, plato, asa, taza y café */
.tv-taza {
  position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle at 30% 24%, rgb(255 255 255 / .16), transparent 46%),
    radial-gradient(circle at 50% 50%, var(--tomate) 55%, #F04A2C 100%);
}
.tv-taza-giro { position: absolute; inset: 0; }
.tv-taza-giro > span { position: absolute; left: 50%; top: 50%; border-radius: 50%; translate: -50% -50%; }
.tv-plato {
  width: 76%; aspect-ratio: 1;
  background:
    radial-gradient(circle, transparent 46%, rgb(18 19 58 / .05) 47.5%, transparent 50%),
    radial-gradient(circle at 36% 30%, #FFFFFF, var(--crema) 42%, #F1DFBF 100%);
  box-shadow: 26px 34px 48px -18px rgb(120 18 0 / .55), inset -6px -8px 18px rgb(160 110 50 / .12);
}
.tv-taza-giro > .tv-asa {
  width: 17%; height: 10.5%; left: 77%; border-radius: 999px;
  background: linear-gradient(170deg, #FFFFFF, #EEDBB8);
  box-shadow: 8px 12px 18px -8px rgb(90 40 10 / .45), inset 0 -3px 6px rgb(160 110 50 / .18);
}
.tv-vaso {
  width: 52%; aspect-ratio: 1;
  background: radial-gradient(circle at 38% 32%, #FFFFFF, var(--crema) 52%, #ECD6AF 100%);
  box-shadow: 14px 20px 30px -12px rgb(90 40 10 / .45), inset 0 0 0 1px rgb(255 255 255 / .9);
}
.tv-cafe {
  width: 41%; aspect-ratio: 1;
  background:
    conic-gradient(from 40deg at 46% 45%, rgb(255 236 205 / .14), transparent 18%, rgb(255 236 205 / .1) 34%, transparent 52%, rgb(255 236 205 / .12) 70%, transparent 86%, rgb(255 236 205 / .14)),
    radial-gradient(circle at 46% 45%, #D9A472 0 6%, #C08450 20%, #9E5C30 38%, #763C1C 58%, #4C230F 80%, #331507 100%);
  box-shadow: inset 0 0 0 5px #C8915D, inset 0 8px 18px rgb(30 10 0 / .45);
}

.tv-pegatina {
  position: absolute; left: -3%; top: 3%;
  width: clamp(112px, 11vw, 160px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; padding: 20px; text-align: center;
  background: var(--mantequilla); color: var(--tinta);
  font: 800 clamp(.78rem, 1vw, .98rem)/1.08 var(--display); text-transform: uppercase; letter-spacing: .01em;
  box-shadow: 0 0 0 5px var(--crema), 0 16px 26px -12px rgb(10 14 60 / .65);
  rotate: -14deg;
}
.tv-pegatina::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  border: 1.5px dashed rgb(18 19 58 / .45);
}

/* Vapor de la taza: tres volutas que suben del café. Quietas, dibujadas; con movimiento, se dibujan y se van en bucle lento */
.tv-vapor {
  position: absolute; left: 38%; top: 2%; width: 24%; height: 48%;
  overflow: visible; pointer-events: none;
  fill: none; stroke: #FFFDF6; stroke-width: 5; stroke-linecap: round;
  filter: drop-shadow(0 2px 3px rgb(18 19 58 / .3));
}
.tv-vapor path:nth-child(n + 2) { stroke-width: 4; opacity: .8; }

/* Estado de partida de la portada (solo con html.mov): taza-volcan.js lo lleva a su sitio al cargar */
.mov .tv-titulo, .mov .tv-entrada, .mov .tv-boton, .mov .tv-taza, .mov .tv-pegatina, .mov .tv-vapor path { opacity: 0; }

/* ---------- Carta en bento ---------- */
.tv-carta {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) var(--margen) clamp(64px, 8vw, 112px);
}
.tv-carta-cabeza { max-width: 760px; }
.tv-carta-cabeza h2, .tv-ficha h2, .tv-donde h2 {
  font: 800 clamp(2.1rem, 4.6vw, 4rem)/.98 var(--display); letter-spacing: -.035em;
  text-wrap: balance;
}
.tv-carta-cabeza p { margin-top: 20px; max-width: 46ch; font-size: 1.1875rem; line-height: 1.5; text-wrap: pretty; }

.tv-bento {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: minmax(250px, auto) minmax(250px, auto) auto; gap: 14px;
}
.tv-celda {
  border-radius: var(--radio); padding: clamp(22px, 2.4vw, 34px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
}
.tv-celda h3 { font: 800 clamp(1.5rem, 2.2vw, 2rem)/1 var(--display); letter-spacing: -.03em; }
.tv-nota { margin-top: 12px; max-width: 34ch; font-size: 1rem; line-height: 1.45; }
.tv-lista li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-top: 1.5px solid color-mix(in srgb, currentColor 28%, transparent);
  font-weight: 600; font-size: 1.0625rem;
}
.tv-lista li span:last-child { font: 600 .95rem/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }

.tv-c-espresso { grid-column: 1 / 3; grid-row: 1 / 3; background: var(--cobalto); color: var(--crema); }
.tv-c-espresso h3 { font-size: clamp(2rem, 3.4vw, 3.1rem); }
.tv-c-leche {
  grid-column: 3 / 7; background: var(--tomate); color: var(--tinta);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 32px;
}
.tv-c-filtro { grid-column: 3 / 5; background: var(--mantequilla); color: var(--tinta); }
.tv-c-dulces {
  grid-column: 1 / 7; background: var(--tinta); color: var(--crema);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: start; gap: 32px;
}
.tv-c-dulces .tv-lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }

/* Marcador: tres vasos de lado, de más café a más leche */
.tv-vasos {
  grid-column: 5 / 7; position: relative; overflow: hidden;
  flex-direction: row; align-items: flex-end; justify-content: center; gap: 7%;
  padding-bottom: 0;
  background:
    linear-gradient(to top, #E7D3AE 0 18%, transparent 18%),
    radial-gradient(120% 90% at 50% 0%, #FFFDF7, var(--crema-2));
}
.tv-vasito {
  --cafe: 50%;
  position: relative; width: 22%; aspect-ratio: .74; margin-bottom: 11%;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);
  background: linear-gradient(to top,
    #3F1C0B 0, #5E2F14 calc(var(--cafe) - 10%), #A8703F var(--cafe), #DDB98C calc(var(--cafe) + 9%),
    #F5E6CC 84%, #FFFBF1 84%, #FFFBF1 90%, rgb(255 255 255 / .55) 90%);
  filter: drop-shadow(0 10px 10px rgb(90 50 10 / .18));
}
.tv-vasito::after {
  content: ""; position: absolute; inset: 0 auto 0 12%; width: 9%;
  background: linear-gradient(rgb(255 255 255 / .55), rgb(255 255 255 / .12));
}
.tv-vasito:nth-child(2) { --cafe: 34%; }
.tv-vasito:nth-child(3) { --cafe: 18%; }

/* ---------- Café del mes ---------- */
.tv-mes { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) clamp(88px, 11vw, 150px); }
.tv-ficha {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-radius: var(--radio); background: #FFFDF8;
  box-shadow: 0 0 0 2.5px var(--tinta);
}
.tv-granos {
  border-radius: calc(var(--radio) - 2px) 0 0 calc(var(--radio) - 2px); min-height: 100%;
  background-color: var(--cobalto);
  background-image:
    radial-gradient(90% 70% at 30% 20%, rgb(255 255 255 / .16), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='150' viewBox='0 0 160 150'%3E%3Cg transform='translate(30 34) rotate(25)'%3E%3Cellipse cx='3' cy='4' rx='12.5' ry='16.5' fill='%230E1660' opacity='.35'/%3E%3Cellipse rx='12.5' ry='16.5' fill='%236A3618'/%3E%3Cellipse cx='-4' cy='-5' rx='5' ry='8' fill='%239A5A2C' opacity='.55'/%3E%3Cpath d='M0 -13.5C5.5 -5 -5.5 5 0 13.5' stroke='%232A1206' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(100 24) rotate(-40)'%3E%3Cellipse cx='3' cy='4' rx='12.5' ry='16.5' fill='%230E1660' opacity='.35'/%3E%3Cellipse rx='12.5' ry='16.5' fill='%236A3618'/%3E%3Cellipse cx='-4' cy='-5' rx='5' ry='8' fill='%239A5A2C' opacity='.55'/%3E%3Cpath d='M0 -13.5C5.5 -5 -5.5 5 0 13.5' stroke='%232A1206' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(78 88) rotate(70)'%3E%3Cellipse cx='3' cy='4' rx='12.5' ry='16.5' fill='%230E1660' opacity='.35'/%3E%3Cellipse rx='12.5' ry='16.5' fill='%236A3618'/%3E%3Cellipse cx='-4' cy='-5' rx='5' ry='8' fill='%239A5A2C' opacity='.55'/%3E%3Cpath d='M0 -13.5C5.5 -5 -5.5 5 0 13.5' stroke='%232A1206' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(22 112) rotate(-15)'%3E%3Cellipse cx='3' cy='4' rx='12.5' ry='16.5' fill='%230E1660' opacity='.35'/%3E%3Cellipse rx='12.5' ry='16.5' fill='%236A3618'/%3E%3Cellipse cx='-4' cy='-5' rx='5' ry='8' fill='%239A5A2C' opacity='.55'/%3E%3Cpath d='M0 -13.5C5.5 -5 -5.5 5 0 13.5' stroke='%232A1206' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(128 118) rotate(32)'%3E%3Cellipse cx='3' cy='4' rx='12.5' ry='16.5' fill='%230E1660' opacity='.35'/%3E%3Cellipse rx='12.5' ry='16.5' fill='%236A3618'/%3E%3Cellipse cx='-4' cy='-5' rx='5' ry='8' fill='%239A5A2C' opacity='.55'/%3E%3Cpath d='M0 -13.5C5.5 -5 -5.5 5 0 13.5' stroke='%232A1206' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(140 60) rotate(-70)'%3E%3Cellipse cx='3' cy='4' rx='12.5' ry='16.5' fill='%230E1660' opacity='.35'/%3E%3Cellipse rx='12.5' ry='16.5' fill='%236A3618'/%3E%3Cellipse cx='-4' cy='-5' rx='5' ry='8' fill='%239A5A2C' opacity='.55'/%3E%3Cpath d='M0 -13.5C5.5 -5 -5.5 5 0 13.5' stroke='%232A1206' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 160px 150px;
}
.tv-ficha-texto { position: relative; padding: clamp(32px, 4.5vw, 64px); }
.tv-sello {
  position: absolute; right: clamp(20px, 3vw, 40px); top: -34px;
  width: 120px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; padding: 16px; text-align: center;
  background: var(--tomate); color: var(--tinta);
  font: 800 .8rem/1.1 var(--display); text-transform: uppercase;
  box-shadow: 0 0 0 5px var(--crema), 0 14px 24px -12px rgb(18 19 58 / .5);
  rotate: 10deg;
}
.tv-ficha h2 { padding-right: 120px; }
.tv-ficha-intro { margin-top: 18px; max-width: 44ch; font-size: 1.1875rem; line-height: 1.5; text-wrap: pretty; }
.tv-datos {
  margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}
.tv-datos div { padding: 14px 0; border-top: 1.5px solid rgb(18 19 58 / .2); }
.tv-datos dt, .tv-cata h3, .tv-tueste h3 { font-size: .9375rem; font-weight: 400; color: #45466B; }
.tv-datos dd { margin: 4px 0 0; font-weight: 600; font-size: 1.125rem; }
.tv-cata, .tv-tueste { margin-top: 28px; }
.tv-cata ul { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.tv-cata li {
  padding: 12px 22px; border-radius: 999px;
  font: 800 1.125rem/1 var(--display); letter-spacing: -.02em;
}
.tv-cata li:nth-child(1) { background: var(--tomate); color: var(--tinta); }
.tv-cata li:nth-child(2) { background: var(--cobalto); color: var(--crema); }
.tv-cata li:nth-child(3) { background: var(--mantequilla); color: var(--tinta); }
.tv-escala { margin-top: 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 360px; }
.tv-escala span { height: 14px; border-radius: 999px; }
.tv-escala span:nth-child(1) { background: #E4BD8A; }
.tv-escala span:nth-child(2) { background: #C88A52; }
.tv-escala span:nth-child(3) { background: #93552A; }
.tv-escala span:nth-child(4) { background: #5F3015; }
.tv-escala span:nth-child(5) { background: #33170A; }
.tv-escala .es-este { box-shadow: 0 0 0 2.5px #FFFDF8, 0 0 0 5px var(--tinta); }
.tv-tueste p { margin-top: 8px; max-width: 360px; display: flex; justify-content: space-between; font-size: .9375rem; color: #45466B; }
.tv-bolsa {
  margin-top: 36px; padding-top: 20px; border-top: 2.5px solid var(--tinta);
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap;
  font-weight: 600;
}
.tv-bolsa strong { font: 800 1.75rem/1 var(--display); letter-spacing: -.02em; }

/* ---------- Dónde estamos: banda tomate ---------- */
.tv-donde { background: var(--tomate); color: var(--tinta); }
.tv-donde-in {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(72px, 9vw, 128px) var(--margen);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center;
}
.tv-donde-intro { margin-top: 20px; max-width: 38ch; font-size: 1.1875rem; line-height: 1.5; }
.tv-horario { margin-top: 40px; }
.tv-horario div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap;
  padding: 16px 0; border-top: 2.5px solid var(--tinta);
}
.tv-horario div:last-child { border-bottom: 2.5px solid var(--tinta); }
.tv-horario dt { font-weight: 600; font-size: 1.125rem; }
.tv-horario dd { margin: 0; font: 800 clamp(1.5rem, 2.6vw, 2.25rem)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tv-martes { margin-top: 24px; font-weight: 600; }

/* Marcador: fachada con toldo de rayas y escaparate redondo */
.tv-fachada {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden;
  background:
    linear-gradient(to top, #1B2BA0 0 9%, transparent 9%),
    linear-gradient(var(--cobalto), #1E37C2);
  box-shadow: 0 30px 60px -30px rgb(90 20 0 / .55);
}
.tv-toldo {
  position: absolute; inset: 0 0 auto; height: calc(28% + 24px);
  background: repeating-linear-gradient(90deg, var(--crema) 0 48px, #1B2FB8 48px 96px);
  background-position: 50% 0;
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 24px) no-repeat, radial-gradient(circle at 50% 0, #000 0 23.5px, transparent 24.5px) 50% 100% / 48px 24px repeat-x;
  mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 24px) no-repeat, radial-gradient(circle at 50% 0, #000 0 23.5px, transparent 24.5px) 50% 100% / 48px 24px repeat-x;
}
.tv-toldo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(255 255 255 / .1), rgb(18 19 58 / .1) 70%, rgb(18 19 58 / .22)); }
.tv-ventana {
  position: absolute; left: 50%; top: 58%; translate: -50% -50%;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background:
    linear-gradient(90deg, transparent calc(50% - 3px), var(--crema) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(transparent calc(50% - 3px), var(--crema) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(transparent 74%, rgb(18 19 58 / .55) 74% 77%, rgb(120 50 10 / .35) 77%),
    radial-gradient(circle at 50% 30%, #FFE3A0, #F2AE48 58%, #C46F28);
  box-shadow: 0 0 0 10px var(--crema), 0 18px 30px -10px rgb(5 10 50 / .5), inset 0 14px 30px rgb(120 50 0 / .35);
}

/* ---------- Pie ---------- */
.tv-pie { background: var(--tinta); color: var(--crema); }
.tv-pie-in {
  max-width: var(--ancho); margin: 0 auto;
  padding: 40px var(--margen) 88px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px;
}
.tv-pie-marca { font: 800 1.25rem/1 var(--display); letter-spacing: -.02em; }
.tv-pie a { margin-left: auto; font-weight: 600; text-underline-offset: 5px; }

/* ---------- Hover solo con ratón ---------- */
@media (hover: hover) and (pointer: fine) {
  .tv-nav a:hover { text-decoration-line: underline; }
  .tv-llegar:hover { background: var(--crema); color: var(--cobalto); }
  .tv-boton:hover { background: #FFE07F; box-shadow: 0 18px 32px -14px rgb(10 14 60 / .8); }
  .tv-pie a:hover { color: var(--mantequilla); }
}

/* ---------- Tableta ---------- */
@media (max-width: 1080px) {
  .tv-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; }
  .tv-c-espresso { grid-column: 1 / 3; grid-row: auto; }
  .tv-c-leche { grid-column: 1 / 5; grid-row: 1; }
  .tv-c-filtro { grid-column: 3 / 5; }
  .tv-vasos { grid-column: 1 / 5; min-height: 300px; }
  .tv-c-dulces { grid-column: 1 / 5; }
  .tv-ficha { grid-template-columns: 1fr; }
  .tv-granos { min-height: 260px; border-radius: calc(var(--radio) - 2px) calc(var(--radio) - 2px) 0 0; }
}

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .tv-nav { display: none; }
  .tv-marca { margin-right: auto; }
  .tv-cabecera-in { padding-block: 14px; }
  .tv-llegar { min-height: 40px; padding: 0 16px; font-size: .9375rem; }

  .tv-hero-in {
    min-height: 0; grid-template-columns: minmax(0, 1fr);
    gap: 0; padding-top: 12px; padding-bottom: 48px;
  }
  .tv-hero-texto { display: contents; }
  .tv-titulo { order: 1; font-size: 16.4vw; }
  .tv-hero-taza { order: 2; width: 82vw; margin: 18px -12vw 0 0; }
  .tv-entrada { order: 3; margin-top: 20px; font-size: 1.125rem; }
  .tv-boton { order: 4; margin-top: 22px; justify-self: start; }
  .tv-pegatina { left: -6%; top: 0; width: 104px; padding: 16px; font-size: .74rem; }

  .tv-bento { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; gap: 12px; }
  .tv-bento > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .tv-c-espresso { min-height: 0; }
  .tv-c-leche, .tv-c-dulces { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tv-c-dulces .tv-lista { grid-template-columns: minmax(0, 1fr); }
  .tv-vasos { min-height: 240px; }
  .tv-datos { grid-template-columns: minmax(0, 1fr); }
  .tv-sello { width: 96px; top: -28px; font-size: .7rem; padding: 12px; }
  .tv-ficha h2 { padding-right: 84px; }
  .tv-ficha-texto { padding: 36px 22px 28px; }
  .tv-donde-in { grid-template-columns: minmax(0, 1fr); }
  .tv-fachada { aspect-ratio: 4 / 3; }
  .tv-ventana { width: 44%; top: 62%; }
  .tv-pie a { margin-left: 0; }
}