/* =========================================================
   EL RINCÓN DE LEO — brief de diseño
   1. Negocio y lugar: cafetería-florería de Leonardo León en una privada de Calete, TJ;
      público 20-35 que viene por la foto, la terraza, su perrito y los cursos de flores.
   2. Personalidad: florido, soleado, coqueto-artesanal.
   3. Mundo visual: azulejo de Talavera de la escalera (azul cobalto), etiqueta del vaso
      "Leo cafetería" con bugambilia, limones del bio y flores del florista.
   4. Recurso firma: marco/cenefa de azulejo cobalto hecho en SVG + letra manuscrita del logo;
      la galería es un mural de azulejos que se voltean para revelar cada foto.
   5. Qué NO es: florería boho rosa pastel genérica ni cadena de café con verde corporativo.
   ========================================================= */

:root {
  /* Color */
  --cal: #f8f4ec;          /* muro encalado */
  --papel: #efe5cf;        /* papel de envoltura de ramo */
  --cobalto: #1d3b8f;      /* azulejo de la escalera */
  --cobalto-hondo: #142a66;
  --bugambilia: #b8195f;   /* flor del vaso */
  --limon: #f2c935;        /* 🍋 del bio */
  --hoja: #456838;
  --tinta: #1b2240;
  --tinta-suave: #4a5070;

  /* Tipografía */
  --f-display: "Fraunces", Georgia, serif;
  --f-texto: "Instrument Sans", system-ui, sans-serif;
  --f-mano: "Sacramento", cursive;

  --curva: cubic-bezier(.2, .8, .2, 1);
  --sombra-dura: 6px 6px 0 var(--cobalto);

  /* Azulejo SVG (cuatro pétalos cobalto, centro limón) */
  --azulejo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23f8f4ec'/%3E%3Cg fill='%231d3b8f'%3E%3Cpath d='M24 5c4.5 6 4.5 10.5 0 15-4.5-4.5-4.5-9 0-15zM24 43c-4.5-6-4.5-10.5 0-15 4.5 4.5 4.5 9 0 15zM5 24c6-4.5 10.5-4.5 15 0-4.5 4.5-9 4.5-15 0zM43 24c-6 4.5-10.5 4.5-15 0 4.5-4.5 9-4.5 15 0z'/%3E%3Cpath d='M0 0h9A9 9 0 0 1 0 9zM48 0v9a9 9 0 0 1-9-9zM0 48v-9a9 9 0 0 1 9 9zM48 48h-9a9 9 0 0 1 9-9z'/%3E%3Ccircle cx='24' cy='24' r='3.4'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='1.5' fill='%23f2c935'/%3E%3Cpath d='M24 0v3M24 45v3M0 24h3M45 24h3' stroke='%231d3b8f' stroke-width='1.2'/%3E%3C/svg%3E");
  --azulejo-inv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%231d3b8f'/%3E%3Cg fill='%23f8f4ec'%3E%3Cpath d='M24 5c4.5 6 4.5 10.5 0 15-4.5-4.5-4.5-9 0-15zM24 43c-4.5-6-4.5-10.5 0-15 4.5 4.5 4.5 9 0 15zM5 24c6-4.5 10.5-4.5 15 0-4.5 4.5-9 4.5-15 0zM43 24c-6 4.5-10.5 4.5-15 0 4.5-4.5 9-4.5 15 0z'/%3E%3Cpath d='M0 0h9A9 9 0 0 1 0 9zM48 0v9a9 9 0 0 1-9-9zM0 48v-9a9 9 0 0 1 9 9zM48 48h-9a9 9 0 0 1 9-9z'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='3.6' fill='%23f2c935'/%3E%3C/svg%3E");
  --azulejo-flor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23f8f4ec'/%3E%3Cpath d='M0 0h10A10 10 0 0 1 0 10zM48 0v10a10 10 0 0 1-10-10zM0 48v-10a10 10 0 0 1 10 10zM48 48h-10a10 10 0 0 1 10-10z' fill='%231d3b8f'/%3E%3Cg fill='%23456838'%3E%3Cpath d='M24 24c-6-1-10 2-12 7 6 1 10-2 12-7zM24 24c6-1 10 2 12 7-6 1-10-2-12-7z'/%3E%3C/g%3E%3Cg fill='%23b8195f' transform='translate(24 21)'%3E%3Cellipse rx='3.4' ry='7' transform='translate(0 -6)'/%3E%3Cellipse rx='3.4' ry='7' transform='rotate(72) translate(0 -6)'/%3E%3Cellipse rx='3.4' ry='7' transform='rotate(144) translate(0 -6)'/%3E%3Cellipse rx='3.4' ry='7' transform='rotate(216) translate(0 -6)'/%3E%3Cellipse rx='3.4' ry='7' transform='rotate(288) translate(0 -6)'/%3E%3C/g%3E%3Ccircle cx='24' cy='21' r='2.6' fill='%23f2c935'/%3E%3Crect x='3' y='3' width='42' height='42' fill='none' stroke='%231d3b8f' stroke-width='1' stroke-dasharray='2 2'/%3E%3C/svg%3E");
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--cal) var(--grano);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: .95; margin: 0; letter-spacing: -.02em; }
h2 { font-size: clamp(2.4rem, 9vw, 4.6rem); }
h2 em, h1 em { font-style: italic; font-weight: 400; color: var(--bugambilia); }
p { margin: 0 0 1em; }
h2 + p { margin-top: 1.1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--cobalto); color: var(--cal); padding: .5em 1em; z-index: 100; }
.saltar:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--limon); outline-offset: 3px; }

.sobretitulo {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  color: var(--cobalto); margin-bottom: .9rem; display: flex; align-items: center; gap: .6em;
}
.sobretitulo::before { content: ""; width: 22px; height: 22px; background: var(--azulejo) center/22px; border: 1px solid var(--cobalto); flex: none; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .75em 1.4em; border: 2px solid var(--cobalto);
  font-weight: 600; text-decoration: none; border-radius: 999px 999px 999px 4px;
  transition: transform .25s var(--curva), box-shadow .25s var(--curva), background .25s;
}
.btn--cobalto { background: var(--cobalto); color: var(--cal); }
.btn--bugambilia { background: var(--bugambilia); border-color: var(--bugambilia); color: #fff; }
.btn--linea { background: transparent; color: var(--cobalto); }
@media (hover: hover) {
  .btn:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--tinta); }
}

/* ---------- Barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem 1rem; background: rgba(248, 244, 236, .94);
  border-bottom: 2px solid var(--cobalto);
  backdrop-filter: saturate(1.2);
}
.barra__marca { display: flex; align-items: center; gap: .5rem; text-decoration: none; margin-right: auto; }
.barra__marca img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--cobalto); }
.barra__marca span { font-family: var(--f-mano); font-size: 1.35rem; line-height: .8; color: var(--cobalto); }
.barra__nav { display: none; }
.barra__estado {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .3em .7em; border-radius: 999px; border: 1.5px solid currentColor; color: var(--tinta-suave); white-space: nowrap;
}
.barra__estado.is-abierto { color: var(--hoja); }
.barra__estado.is-abierto::before { content: "● "; }
.barra__estado.is-cerrado { color: var(--bugambilia); }
.barra__cta {
  background: var(--bugambilia); color: #fff; text-decoration: none; font-weight: 600; font-size: .85rem;
  padding: .55em .9em; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 400px) { .barra__estado { display: none; } }
@media (min-width: 960px) {
  .barra { padding: .6rem 2rem; gap: 1.5rem; }
  .barra__nav { display: flex; gap: 1.3rem; }
  .barra__nav a { text-decoration: none; font-weight: 600; font-size: .92rem; }
  .barra__nav a:hover { color: var(--bugambilia); }
}

/* ---------- Hero ---------- */
.hero {
  display: grid; gap: 2rem;
  padding: 2rem 1rem 0;
  position: relative;
}
.hero__lugar { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--cobalto); }
.hero__titulo { display: flex; flex-direction: column; }
.hero__script {
  font-family: var(--f-mano); font-weight: 400; letter-spacing: 0;
  font-size: clamp(2.6rem, 12vw, 4.4rem); color: var(--cobalto); line-height: 1; margin-bottom: .1em;
}
.hero__grande { font-size: clamp(3.6rem, 17vw, 8.4rem); line-height: .86; letter-spacing: -.045em; }
.hero__grande em { color: var(--bugambilia); }
.hero__lema { max-width: 34ch; margin-top: 1.2rem; font-size: 1.05rem; color: var(--tinta-suave); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__foto { margin: 0; position: relative; justify-self: center; width: min(100%, 420px); }
.azulejo-marco {
  padding: 14px; background: var(--azulejo) 0 0/28px; border: 2px solid var(--cobalto);
  box-shadow: var(--sombra-dura);
}
.hero__foto .azulejo-marco { transform: rotate(-2deg); }
.hero__foto img { width: 100%; aspect-ratio: 4/5.4; object-fit: cover; border: 2px solid var(--cobalto); }
.etiqueta-colgante {
  position: absolute; left: -.4rem; bottom: 1.6rem;
  background: var(--limon); color: var(--tinta);
  padding: 1rem 1.2rem .9rem 2.2rem; max-width: 14rem;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%);
  transform: rotate(4deg);
  display: flex; flex-direction: column; line-height: 1.15;
}
.etiqueta-colgante__hoyo { position: absolute; left: 1rem; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--cal); box-shadow: inset 0 0 0 2px var(--tinta); }
.etiqueta-colgante small { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.etiqueta-colgante strong { font-family: var(--f-display); font-size: 1.5rem; font-style: italic; }
.etiqueta-colgante span:last-child { font-size: .82rem; }

.cinta {
  grid-column: 1 / -1; margin: 1rem -1rem 0;
  background: var(--cobalto); color: var(--cal); overflow: hidden;
  border-block: 4px solid var(--limon);
}
.cinta__pista { display: flex; width: max-content; animation: cinta 38s linear infinite; }
.cinta__pista span { font-family: var(--f-display); font-style: italic; font-size: 1.3rem; padding: .55em 0; white-space: nowrap; }
@keyframes cinta { to { transform: translateX(-50%); } }

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.25fr 1fr; padding: 3.5rem 3rem 0; align-items: center; column-gap: 3rem; }
  .hero__foto { justify-self: end; margin-bottom: -3rem; z-index: 2; }
  .etiqueta-colgante { left: -4rem; }
  .cinta { margin: 0 -3rem; }
}

/* ---------- Carta ---------- */
.carta { padding: 4rem 1rem; max-width: 1180px; margin: 0 auto; }
.carta__cabeza { max-width: 36rem; margin-bottom: 2.5rem; }
.carta__cabeza p:last-child { color: var(--tinta-suave); }

.estrella {
  display: grid; grid-template-columns: 1fr; background: var(--cobalto); color: var(--cal);
  border: 2px solid var(--cobalto); box-shadow: 8px 8px 0 var(--limon); margin-bottom: 3rem;
}
.estrella__foto img { width: 100%; height: 100%; max-height: 360px; object-fit: cover; object-position: center 35%; }
.estrella__texto { padding: 1.6rem 1.3rem 1.8rem; }
.estrella h3 { font-size: clamp(2rem, 7vw, 3.2rem); margin-bottom: .8rem; }
.estrella .desc { color: #dfe4f3; max-width: 40ch; }
.sello {
  display: inline-block; background: var(--limon); color: var(--tinta);
  font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .4em .8em; transform: rotate(-3deg); margin-bottom: 1rem;
}
.aviso { font-family: var(--f-display); font-style: italic; color: var(--limon); font-size: 1.05rem; }
.precio { font-family: var(--f-display); font-variant-numeric: tabular-nums; font-size: 1.15rem; color: var(--bugambilia); margin: 0; }
.precio:empty, .tamanos .precio:empty { display: none; }
.estrella .precio { color: var(--limon); font-size: 1.6rem; }
@media (min-width: 760px) {
  .estrella { grid-template-columns: .9fr 1.1fr; }
  .estrella__foto img { max-height: none; }
  .estrella__texto { padding: 2.6rem; align-self: center; }
}

.carta__grupos { display: grid; gap: 2.4rem; }
@media (min-width: 760px) { .carta__grupos { grid-template-columns: 1fr 1fr; gap: 3rem 4rem; } }
.grupo h3 {
  font-size: 1rem; font-family: var(--f-texto); letter-spacing: .14em; text-transform: uppercase;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--cobalto); padding-bottom: .5rem; margin-bottom: 1rem; color: var(--tinta-suave); font-weight: 600;
}
.grupo h3 span { font-family: var(--f-display); font-style: italic; text-transform: none; letter-spacing: -.01em; font-size: 2rem; color: var(--cobalto); font-weight: 600; }
.grupo ul { list-style: none; margin: 0; padding: 0; }
.grupo li { padding: .9rem 0 1rem; border-bottom: 1px dashed rgba(29, 59, 143, .35); }
.grupo .item { margin: 0 0 .2rem; font-size: 1.05rem; }
.grupo .item strong { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; }
.grupo .desc { margin: 0; color: var(--tinta-suave); max-width: 46ch; }
.nuevo { background: var(--bugambilia); color: #fff; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: .2em .6em; vertical-align: middle; }
.grupo--temporada {
  background: var(--papel); padding: 1.2rem 1.2rem .4rem; border: 2px dashed var(--bugambilia);
  position: relative;
}
.grupo--temporada h3 { border-color: var(--bugambilia); }
.grupo--temporada h3 span { color: var(--bugambilia); }

.tamanos {
  margin-top: 2.6rem; display: grid; gap: 1rem; align-items: center;
  border-block: 2px solid var(--cobalto); padding: 1.2rem 0;
}
.tamanos__titulo { font-family: var(--f-display); font-style: italic; font-size: 1.6rem; margin: 0; color: var(--cobalto); }
.tamanos__op { display: grid; gap: .8rem; }
.tamanos__op p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.tamanos__op strong { font-family: var(--f-display); font-size: 1.5rem; }
.tamanos__mejor strong { color: var(--bugambilia); }
.tamanos__sello { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; border: 1.5px solid var(--bugambilia); color: var(--bugambilia); padding: .15em .55em; border-radius: 999px; }
@media (min-width: 760px) {
  .tamanos { grid-template-columns: auto 1fr; gap: 2rem; }
  .tamanos__op { grid-template-columns: 1fr 1fr; }
}

.talleres {
  margin-top: 3rem; display: grid; grid-template-columns: 56px 1fr; gap: 1rem;
  background: var(--hoja); color: var(--cal); padding: 1.6rem 1.3rem; position: relative;
  border-radius: 140px 4px 4px 4px;
}
.talleres__ramita { width: 56px; height: 112px; color: var(--limon); }
.talleres .sobretitulo { color: var(--limon); }
.talleres h3 { font-size: clamp(1.7rem, 6vw, 2.4rem); margin-bottom: .7rem; }
.talleres a { color: var(--limon); }
@media (min-width: 760px) { .talleres { grid-template-columns: 90px 1fr; padding: 2rem 2.4rem 2rem 3rem; } .talleres__ramita { width: 90px; height: 180px; } }

.carta__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; }

/* ---------- Mural de azulejos (galería) ---------- */
.mural {
  background: var(--cobalto-hondo); color: var(--cal);
  padding: 5.5rem 1rem 4.5rem; position: relative;
}
.mural::before, .pie::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px;
  background: var(--azulejo) 0 0/28px; border-bottom: 2px solid var(--cobalto);
}
.mural__cabeza { max-width: 1180px; margin: 0 auto 2.2rem; }
.mural__cabeza .sobretitulo { color: var(--limon); }
.mural__cabeza h2 em { color: var(--limon); }
.mural__cabeza p:last-child { color: #c8d0ea; max-width: 48ch; }

/* La retícula: azulejos cuadrados con junta de cal, como un muro */
.mural__reticula {
  list-style: none; margin: 0 auto; padding: 8px; max-width: 1180px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  background: #e9e2d2; border: 2px solid var(--cal);
  box-shadow: 10px 10px 0 var(--bugambilia);
}
.azulejo { aspect-ratio: 1; perspective: 900px; }
.azulejo__btn {
  position: relative; display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit;
  transform-style: preserve-3d;
  transition: transform .6s var(--curva);
  transition-delay: var(--retraso, 0ms);
}
.azulejo.is-volteado .azulejo__btn { transform: rotateY(180deg); cursor: zoom-in; }
.azulejo__cara {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
}
.azulejo__cara--pintada {
  background: var(--azulejo) 0 0/50%; border: 1px solid rgba(29, 59, 143, .35);
  box-shadow: inset 0 0 0 5px var(--cal), inset 0 0 0 7px var(--cobalto);
  display: grid; place-items: center;
}
/* Cuatro diseños de azulejo que se alternan como en un muro pintado a mano */
.azulejo:nth-child(4n+2) .azulejo__cara--pintada { background: var(--azulejo-inv) 0 0/50%; box-shadow: inset 0 0 0 5px var(--cobalto), inset 0 0 0 7px var(--cal); }
.azulejo:nth-child(4n+3) .azulejo__cara--pintada { background: var(--azulejo-flor) center/100%; }
.azulejo:nth-child(4n+4) .azulejo__cara--pintada { background: var(--azulejo) center/100%; }
.azulejo__num {
  font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 1.1rem;
  background: var(--cal); color: var(--cobalto); border: 2px solid var(--cobalto);
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
}
.azulejo__cara--foto { transform: rotateY(180deg); background: var(--cobalto); }
.azulejo__cara--foto img { width: 100%; height: 100%; object-fit: cover; }
.azulejo__pie {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem .6rem .45rem; text-align: left;
  font-family: var(--f-display); font-style: italic; font-size: .95rem; line-height: 1.1; color: #fff;
  background: linear-gradient(transparent, rgba(20, 42, 102, .9));
}
@media (hover: hover) {
  .azulejo:not(.is-volteado) .azulejo__btn:hover { transform: rotateY(-14deg) rotateX(6deg); }
}
.azulejo__btn:focus-visible { outline-offset: -4px; z-index: 1; }

.mural__pie {
  max-width: 1180px; margin: 2.4rem auto 0; display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
.mural__cuenta { margin: 0; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; }
@media (hover: hover) { .flecha:hover { background: var(--limon); color: var(--tinta); } }
.btn--limon { background: var(--limon); border-color: var(--limon); color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer; }

.flecha {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--limon); background: transparent; color: var(--limon);
  font-size: 1.4rem; cursor: pointer; transition: background .2s, color .2s;
}

@media (min-width: 640px) { .mural__reticula { grid-template-columns: repeat(3, 1fr); padding: 10px; gap: 8px; } }
@media (min-width: 960px) {
  .mural { padding-inline: 3rem; }
  .mural__reticula { grid-template-columns: repeat(5, 1fr); }
  .azulejo__pie { font-size: 1.1rem; padding: 1.2rem .8rem .6rem; }
}


/* Lupa (lightbox) */
.lupa { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; }
.lupa[hidden] { display: none; }
.lupa__fondo { position: absolute; inset: 0; background: rgba(20, 42, 102, .92); }
.lupa__caja {
  position: relative; background: var(--papel); padding: 1rem; max-width: min(92vw, 560px); max-height: 92vh;
  display: grid; gap: .6rem; border: 2px solid var(--cobalto); box-shadow: 8px 8px 0 var(--limon);
}
.lupa__caja img { max-height: 68vh; width: auto; margin: 0 auto; object-fit: contain; }
.lupa__pie p { margin: 0; }
.lupa__titulo { font-family: var(--f-display); font-style: italic; font-size: 1.3rem; color: var(--cobalto); }
.lupa__pie p + p { font-family: var(--f-mano); font-size: 1.5rem; color: var(--bugambilia); line-height: 1.1; }
.lupa__cerrar {
  position: absolute; top: -18px; right: -12px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bugambilia); color: #fff; border: 0; font-size: 1.6rem; cursor: pointer;
}
.lupa__nav { display: flex; justify-content: space-between; }
.lupa .flecha { border-color: var(--cobalto); color: var(--cobalto); width: 46px; height: 46px; }

/* ---------- Reseñas ---------- */
.resenas { padding: 4.5rem 1rem; max-width: 1180px; margin: 0 auto; display: grid; gap: 2.5rem; }
.resenas__nota { display: block; font-size: clamp(6rem, 30vw, 12rem); color: var(--cobalto); letter-spacing: -.06em; line-height: .8; }
.resenas__en { font-family: var(--f-mano); font-weight: 400; font-size: clamp(2.6rem, 11vw, 4rem); color: var(--bugambilia); letter-spacing: 0; }
.resenas__fuente { margin-top: 1rem; color: var(--tinta-suave); }
.resenas__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
.resenas__lista li { background: #fff; border: 2px solid var(--cobalto); padding: 1.2rem 1.3rem; position: relative; }
.resenas__lista li:nth-child(2) { transform: rotate(1deg); background: var(--papel); }
.resenas__lista li::before {
  content: "✿"; position: absolute; top: -.85rem; left: 1rem; background: var(--cal);
  color: var(--bugambilia); padding: 0 .3rem; font-size: 1.2rem;
}
.resenas__lista blockquote { margin: 0 0 .7rem; font-family: var(--f-display); font-size: 1.3rem; line-height: 1.25; }
.resenas__lista p { margin: 0; font-size: .9rem; color: var(--tinta-suave); }
@media (min-width: 900px) { .resenas { grid-template-columns: 1fr 1.2fr; align-items: center; gap: 4rem; } }

/* ---------- Pago ---------- */
.pago { padding: 4rem 1rem; background: var(--papel); }
.pago > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
.pago__formas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.6rem auto 2rem; }
.pago__formas li {
  display: flex; align-items: center; gap: .5rem; font-weight: 600;
  border: 2px solid var(--cobalto); padding: .5rem 1rem; border-radius: 999px; background: var(--cal);
}
.pago__formas .es-destacada { background: var(--cobalto); color: var(--cal); }
.pago__icono { font-family: var(--f-display); font-size: 1.1rem; }
.transfer { display: grid; background: var(--cal); border: 2px solid var(--cobalto); box-shadow: 8px 8px 0 var(--bugambilia); }
.transfer__borde { background: var(--azulejo) 0 0/36px; min-height: 36px; border-bottom: 2px solid var(--cobalto); }
.transfer__cuerpo { padding: 1.5rem 1.2rem; }
.transfer h3 { font-size: clamp(2rem, 8vw, 3rem); color: var(--cobalto); }
.transfer h3 span { display: block; font-family: var(--f-mano); font-weight: 400; color: var(--bugambilia); font-size: .7em; letter-spacing: 0; margin-top: .2rem; }
.transfer__intro { margin-top: 1rem; color: var(--tinta-suave); }
.transfer__datos { margin: 1rem 0 1.4rem; }
.transfer__datos div {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem .8rem;
  padding: .7rem 0; border-bottom: 1px dashed rgba(29, 59, 143, .4);
}
.transfer__datos dt { grid-column: 1; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--tinta-suave); }
.transfer__datos dd { grid-column: 1; margin: 0; font-family: var(--f-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.copiar {
  grid-column: 2; grid-row: 1 / 3; font: inherit; font-size: .82rem; font-weight: 600;
  min-height: 40px; padding: .4rem .9rem; border: 2px solid var(--cobalto); background: transparent; color: var(--cobalto);
  border-radius: 999px; cursor: pointer;
}
.copiar.is-copiado { background: var(--hoja); border-color: var(--hoja); color: #fff; }
@media (hover: hover) { .copiar:hover { background: var(--cobalto); color: var(--cal); } }
.transfer__enviar { width: 100%; }
.transfer__aviso { margin: .8rem 0 0; font-size: .9rem; color: var(--hoja); min-height: 1.4em; }
@media (min-width: 760px) {
  .transfer { grid-template-columns: 90px 1fr; }
  .transfer__borde { border-bottom: 0; border-right: 2px solid var(--cobalto); }
  .transfer__cuerpo { padding: 2.2rem 2.6rem; }
  .transfer__enviar { width: auto; }
}

/* ---------- Redes ---------- */
.redes { padding: 4.5rem 1rem; max-width: 1180px; margin: 0 auto; }
.redes__botones { display: grid; gap: .9rem; margin: 2rem 0; }
.red {
  display: flex; flex-direction: column; gap: .2rem; text-decoration: none;
  border: 2px solid var(--cobalto); padding: 1.1rem 1.3rem; background: var(--cal);
  transition: transform .25s var(--curva), box-shadow .25s var(--curva);
}
.red__usuario { font-family: var(--f-display); font-size: clamp(1.4rem, 5.5vw, 2rem); font-weight: 600; color: var(--cobalto); word-break: break-word; }
.red__dato { color: var(--tinta-suave); }
.red--ig { background: var(--bugambilia); border-color: var(--bugambilia); }
.red--ig .red__usuario, .red--ig .red__dato { color: #fff; }
.red--ig b { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; margin-right: .2rem; }
@media (hover: hover) { .red:hover { transform: translate(-4px, -4px); box-shadow: 6px 6px 0 var(--limon); } }
@media (min-width: 860px) { .redes__botones { grid-template-columns: 1.4fr 1fr 1fr; } .red--ig { grid-row: span 1; } }
.minifeed { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.minifeed img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: filter .3s; }
@media (min-width: 760px) { .minifeed { grid-template-columns: repeat(6, 1fr); } }
@media (hover: hover) { .minifeed a:hover img { filter: saturate(1.3) brightness(1.05); } }

/* ---------- Visita ---------- */
.visita {
  background: var(--cobalto); color: var(--cal); padding: 4.5rem 1rem;
  display: grid; gap: 2.5rem;
}
.visita .sobretitulo { color: var(--limon); }
.visita h2 em { color: var(--limon); }
.visita h2 em.is-cerrado { color: #ff9cc6; }
.visita__estado { margin-top: 1rem; font-size: 1.05rem; }
.horario { border-collapse: collapse; width: 100%; max-width: 420px; margin: 1.2rem 0 1.6rem; }
.horario th, .horario td { text-align: left; padding: .5rem 0; border-bottom: 1px solid rgba(248,244,236,.25); font-weight: 400; }
.horario td { text-align: right; font-variant-numeric: tabular-nums; }
.horario tr.is-hoy th, .horario tr.is-hoy td { font-weight: 600; color: var(--limon); }
.horario tr.is-hoy th::after { content: " · hoy"; font-weight: 400; font-style: italic; }
.visita address { font-style: normal; font-family: var(--f-display); font-size: 1.4rem; line-height: 1.25; margin-bottom: 1.2rem; }
.visita__tips { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: .45rem; }
.visita__tips li::before { content: "✿ "; color: var(--limon); }
.visita__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.visita .btn--cobalto { background: var(--limon); border-color: var(--limon); color: var(--tinta); }
.visita .btn--linea { color: var(--cal); border-color: var(--cal); }
.visita__mapa { box-shadow: 8px 8px 0 var(--limon); }
.visita__mapa iframe { display: block; width: 100%; height: 360px; border: 2px solid var(--cobalto); }
@media (min-width: 900px) {
  .visita { grid-template-columns: 1fr 1.15fr; padding: 5rem 3rem; align-items: center; gap: 4rem; }
  .visita__mapa iframe { height: 520px; }
}

/* ---------- Pie ---------- */
.pie { position: relative; text-align: center; padding: 4.5rem 1rem 2.5rem; background: var(--cal); }
.pie__ramita { width: 40px; height: 80px; color: var(--hoja); margin: 0 auto .6rem; display: block; }
.pie__script { font-family: var(--f-mano); font-size: 2.8rem; color: var(--cobalto); line-height: 1; margin-bottom: .6rem; }
.pie__creditos { font-size: .8rem; color: var(--tinta-suave); margin: 1.2rem 0 0; letter-spacing: .06em; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cinta__pista { flex-wrap: wrap; width: auto; }
  .cinta__pista span + span { display: none; }
  .cinta__pista span { white-space: normal; padding-inline: 1rem; }
  .azulejo:not(.is-volteado) .azulejo__btn:hover { transform: none; }
}