/* Minipueblo · estilo común de todas las páginas. Tema claro: papel, tinta y coral. */
@font-face { font-family: Fraunces; src: url(/fuentes/fraunces.woff2) format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: Fraunces; src: url(/fuentes/fraunces-it.woff2) format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url(/fuentes/plus.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }

:root {
  --papel: #fbf6ee; --blanco: #fffdf9; --tinta: #2b2118; --suave: #6f5f4f; --linea: #ebdfcd;
  --coral: #e8735a; --coral-osc: #c4503a; --menta: #cfe9d9; --cielo: #d6e9fb; --melocoton: #ffe0cc; --hierba: #7cc06a;
  --sombra: 0 1px 2px rgba(60,40,20,.06), 0 18px 40px -18px rgba(60,40,20,.28);
  --sombra-alta: 0 2px 4px rgba(60,40,20,.05), 0 40px 80px -40px rgba(60,40,20,.45);
  --ancho: 1240px; --gutter: 28px; --muelle: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--tinta); background: var(--papel); min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; -webkit-font-smoothing: antialiased; }
main { flex: 1; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--coral-osc); text-underline-offset: 3px; }
img, canvas { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 6px; }
.salto { position: absolute; left: 12px; top: -60px; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 100; }
.salto:focus { top: 12px; }

/* Cambio de página: la cabecera se queda, el contenido sube un poco */
@view-transition { navigation: auto; }
.barra { view-transition-name: cabecera; }
main { view-transition-name: contenido; }
::view-transition-old(contenido) { animation: vt-sale .18s ease-in both; }
::view-transition-new(contenido) { animation: vt-entra .34s var(--muelle) both; }
@keyframes vt-sale { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(18px); } }

/* Fondo: manchas de color y grano de papel */
.fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background:
  radial-gradient(48vw 48vw at 4% 2%, var(--melocoton), transparent 70%),
  radial-gradient(40vw 40vw at 100% 34%, var(--menta), transparent 70%),
  radial-gradient(38vw 38vw at 44% 104%, var(--cielo), transparent 70%); opacity: .75; }
.fondo::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* Cabecera y pestañas */
.barra { position: sticky; top: 0; z-index: 40; background: rgba(251,246,238,.86); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.barra.pegada { border-color: var(--linea); box-shadow: 0 10px 24px -22px rgba(60,40,20,.5); }
.barra-dentro { display: flex; align-items: center; gap: 22px; max-width: var(--ancho); margin: 0 auto; padding: 12px var(--gutter); }
.logo { display: flex; align-items: center; gap: 9px; flex: none; text-decoration: none; color: var(--tinta); font-family: Fraunces, serif; font-size: 25px; letter-spacing: -.02em; }
.logo b { font-weight: 600; color: var(--coral-osc); font-style: italic; }
.logo img { width: 38px; height: 38px; transition: transform .4s var(--muelle); }
.logo:hover img { transform: translateY(-3px) rotate(-3deg) scale(1.05); }
.pestanas { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; min-width: 0; }
.pestanas a { position: relative; padding: 9px 13px; border-radius: 99px; color: var(--suave); font-weight: 650; font-size: 14px; text-decoration: none; white-space: nowrap; transition: color .15s, background .15s; }
.pestanas a:hover { color: var(--tinta); background: rgba(232,115,90,.1); }
.pestanas a[aria-current="page"] { color: #fff; background: var(--tinta); }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; border: 0; border-radius: 14px; padding: 13px 20px; font-weight: 800; font-size: 15px; color: #fff; text-decoration: none; background: linear-gradient(135deg, #e97f63, var(--coral-osc)); box-shadow: 0 8px 18px -8px rgba(196,80,58,.85), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .15s; white-space: nowrap; }
.boton:hover { transform: translateY(-1px) scale(1.02); }
.boton:active { transform: scale(.97); }
.boton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform: translateX(-120%); animation: barrido 4s ease-in-out infinite; }
@keyframes barrido { 60%, 100% { transform: translateX(120%); } }
.boton.grande { padding: 18px 28px; font-size: 17px; border-radius: 18px; }
.boton.claro { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.boton.claro::after { display: none; }
.barra .boton { padding: 10px 16px; font-size: 14px; border-radius: 12px; flex: none; }

/* Estructura */
.ancho { max-width: var(--ancho); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.estrecho { max-width: 780px; }
.cabeza { padding-top: 48px; padding-bottom: 8px; }
.miga { font-size: 13px; font-weight: 600; color: var(--suave); margin: 0 0 14px; }
.miga a { color: inherit; }
.ceja { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-osc); }
h1, h2, h3 { font-family: Fraunces, serif; font-weight: 500; }
h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -.035em; margin: 12px 0 16px; text-wrap: balance; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--coral-osc); background: linear-gradient(transparent 72%, var(--melocoton) 72%); padding: 0 .06em; }
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.07; letter-spacing: -.03em; margin: 8px 0 14px; text-wrap: balance; }
h3 { font-size: 24px; letter-spacing: -.02em; line-height: 1.16; margin: 0 0 8px; }
.entrada { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--suave); max-width: 680px; margin: 0; }
.bloque { padding-top: 84px; }
.bloque > .sub, .sub { font-size: 17px; line-height: 1.6; color: var(--suave); max-width: 660px; margin: 0; }
.bloque.corto { padding-top: 56px; }

/* Texto largo (artículos y legales) */
.texto { font-size: 17px; line-height: 1.72; }
.texto h2 { font-size: clamp(26px, 3.2vw, 34px); margin: 44px 0 10px; }
.texto h3 { margin: 28px 0 6px; }
.texto p, .texto ul, .texto ol { margin: 0 0 16px; }
.texto li { margin: 0 0 6px; }
.texto table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--linea); }
.texto th, .texto td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linea); }
.texto th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.texto tr:last-child td { border-bottom: 0; }
.nota { background: #fff7ee; border: 1px solid #f6dcc0; border-radius: 16px; padding: 14px 18px; font-size: 15px; line-height: 1.55; }
.nota b { color: var(--coral-osc); }
.por-rellenar { background: #fff0c9; padding: 0 5px; border-radius: 5px; font-weight: 700; }

/* Aparecer al hacer scroll */
.revela { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s var(--muelle); }
.revela.visto, .sin-js .revela { opacity: 1; transform: none; }
.rejilla > .revela:nth-child(3n+2) { transition-delay: .08s; }
.rejilla > .revela:nth-child(3n) { transition-delay: .16s; }

/* Rejillas y tarjetas */
.rejilla { display: grid; gap: 18px; margin: 30px 0 0; padding: 0; list-style: none; }
.r2 { grid-template-columns: repeat(2, 1fr); } .r3 { grid-template-columns: repeat(3, 1fr); } .r4 { grid-template-columns: repeat(4, 1fr); }
.caja { background: rgba(255,255,255,.82); border: 1px solid var(--linea); border-radius: 24px; padding: 26px; box-shadow: var(--sombra); }
.caja h3 { margin-top: 0; }
.caja p { margin: 0; color: var(--suave); line-height: 1.55; }
.numero { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; background: linear-gradient(135deg, #e97f63, var(--coral-osc)); color: #fff; font-family: Fraunces, serif; font-size: 24px; font-weight: 700; box-shadow: 0 10px 20px -10px rgba(196,80,58,.9); }

/* Tarjeta de pueblo */
.pueblo { position: relative; display: flex; flex-direction: column; background: var(--blanco); border-radius: 22px; padding: 10px 10px 16px; text-decoration: none; color: var(--tinta); box-shadow: var(--sombra); transition: transform .35s var(--muelle), box-shadow .35s; }
.pueblo:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--sombra-alta); }
.pueblo .foto { position: relative; aspect-ratio: 5 / 4; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 50% 38%, #fffaf2, #f6ecdd 70%, #efe2cf); }
.pueblo .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--muelle); }
.pueblo:hover .foto img { transform: scale(1.06); }
.pueblo b { font-family: Fraunces, serif; font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; margin: 12px 8px 2px; }
.pueblo span { font-size: 13px; color: var(--suave); margin: 0 8px; }
.pueblo .sello { position: absolute; left: 18px; top: 18px; margin: 0; padding: 4px 9px; border-radius: 99px; background: var(--tinta); color: #fff; font-size: 12px; font-weight: 800; z-index: 1; }

/* Filtro de pueblos */
.filtro { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 26px 0 0; }
.filtro input { flex: 1 1 240px; min-width: 0; font: inherit; font-size: 16px; font-weight: 600; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--linea); background: #fff; color: var(--tinta); }
.filtro input:focus { outline: 0; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(232,115,90,.15); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 0; }
.chip { border: 1.5px solid var(--linea); background: #fff; border-radius: 99px; padding: 7px 13px; font-size: 13px; font-weight: 700; color: var(--tinta); text-decoration: none; transition: border-color .15s, transform .15s; }
.chip:hover { transform: translateY(-1px); border-color: var(--coral); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* Maqueta en una página */
.maqueta { position: relative; background: var(--blanco); border-radius: 26px; padding: 12px; box-shadow: var(--sombra-alta); }
.lienzo { position: relative; aspect-ratio: 1 / .78; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 50% 38%, #fffaf2, #f6ecdd 70%, #efe2cf); touch-action: pan-y; cursor: grab; }
.lienzo:active { cursor: grabbing; }
.lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lienzo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s; }
.lienzo.viva img { opacity: 0; }
.pista { position: absolute; left: 12px; bottom: 10px; margin: 0; font-size: 12px; font-weight: 600; color: var(--suave); background: rgba(255,255,255,.8); padding: 5px 10px; border-radius: 99px; pointer-events: none; }
.estilos { display: flex; flex-wrap: wrap; gap: 8px; }
.estilo { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--linea); background: #fff; border-radius: 99px; padding: 6px 13px 6px 6px; font-weight: 700; font-size: 14px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.estilo i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.estilo:hover { transform: translateY(-1px); }
.estilo[aria-pressed="true"] { border-color: var(--tinta); box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); }

/* Ficha de pueblo */
.ficha { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 26px; }
.ficha .pegajosa { position: sticky; top: 84px; }
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }
.cifra { background: rgba(255,255,255,.85); border: 1px solid var(--linea); border-radius: 18px; padding: 15px 16px; }
.cifra b { display: block; font-family: Fraunces, serif; font-size: 33px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cifra span { font-size: 13px; font-weight: 600; color: var(--suave); }
.barras { list-style: none; margin: 18px 0 0; padding: 18px; background: #fff; border: 1px solid var(--linea); border-radius: 18px; }
.barras li { display: grid; grid-template-columns: 76px 1fr 46px; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; }
.barras span { color: var(--suave); font-weight: 600; }
.barras i { display: block; height: 14px; }
.barras b { display: block; height: 100%; background: var(--coral); border-radius: 0 4px 4px 0; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--muelle); }
.visto .barras b, .barras.visto b, .sin-js .barras b { transform: none; }
.barras em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.tabla-ranking { width: 100%; border-collapse: collapse; margin: 26px 0 0; font-size: 15px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--linea); }
.tabla-ranking th, .tabla-ranking td { padding: 11px 14px; text-align: right; border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
.tabla-ranking th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--suave); }
.tabla-ranking th:nth-child(-n+2), .tabla-ranking td:nth-child(-n+2) { text-align: left; }
.tabla-ranking tr:last-child td { border-bottom: 0; }
.tabla-ranking td:first-child { color: var(--suave); font-weight: 700; width: 40px; }
.tabla-ranking a { font-weight: 700; color: var(--tinta); }
.desplaza { overflow-x: auto; -webkit-overflow-scrolling: touch; }

details { background: rgba(255,255,255,.85); border: 1px solid var(--linea); border-radius: 18px; padding: 16px 20px; margin: 0 0 10px; transition: background .2s; }
details[open] { background: #fff; }
summary { font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--coral); transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 10px 0 0; color: var(--suave); line-height: 1.6; }

/* Cinta */
.cinta { overflow: hidden; border-block: 1px solid var(--linea); background: rgba(255,255,255,.55); padding: 13px 0; margin: 40px 0 0; }
.cinta div { display: flex; gap: 34px; width: max-content; animation: cinta 60s linear infinite; font-family: Fraunces, serif; font-size: 21px; font-style: italic; white-space: nowrap; }
.cinta:hover div { animation-play-state: paused; }
.cinta a, .cinta span { color: var(--suave); text-decoration: none; }
.cinta a:hover { color: var(--coral-osc); }
.cinta a::after, .cinta span::after { content: "✦"; margin-left: 34px; color: var(--coral); font-style: normal; font-size: 13px; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Llamada final */
.final { position: relative; overflow: hidden; text-align: center; padding: 60px 24px; margin-top: 84px; border-radius: 34px; background: linear-gradient(135deg, #fff3ea, #fde0cb 60%, #fcd3bb); box-shadow: var(--sombra); }
.final h2 { margin: 0 0 12px; font-size: clamp(34px, 5vw, 58px); }
.final p { color: var(--suave); font-size: 18px; margin: 0 0 24px; }
.final small { display: block; margin-top: 12px; font-size: 13px; color: var(--suave); }
.aviso-prueba { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 13px; border-radius: 99px; background: #fff; border: 1px solid #f3cdb6; font-size: 13px; font-weight: 700; color: var(--coral-osc); }

/* Pie */
footer { margin-top: 84px; border-top: 1px solid var(--linea); background: rgba(255,255,255,.45); font-size: 13px; color: var(--suave); line-height: 1.6; }
.pie { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; padding-top: 38px; padding-bottom: 34px; }
.pie h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin: 0 0 6px; }
.pie a { color: inherit; }
.pie p { margin: 0 0 10px; }

@media (max-width: 1020px) {
  :root { --gutter: 16px; }
  .barra-dentro { flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 8px; justify-content: space-between; }
  .pestanas { order: 3; flex: 0 0 calc(100% + 32px); margin: 0 -16px; padding: 0 16px 2px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 26px), transparent); }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestanas a { scroll-snap-align: center; padding: 7px 12px; font-size: 13.5px; }
  .logo { font-size: 22px; } .logo img { width: 32px; height: 32px; }
  .r3, .r4 { grid-template-columns: repeat(2, 1fr); }
  .ficha { grid-template-columns: 1fr; gap: 24px; }
  .ficha .pegajosa { position: static; }
  .pie { grid-template-columns: 1fr 1fr; }
  .pie > div:first-child { grid-column: 1 / -1; }
  .bloque { padding-top: 60px; }
  .cabeza { padding-top: 28px; }
  .final { margin-top: 60px; padding: 44px 18px; }
  footer { margin-top: 60px; }
}
@media (max-width: 620px) {
  .r2, .r3 { grid-template-columns: 1fr; }
  .r4 { grid-template-columns: repeat(2, 1fr); }
  .rejilla.pueblos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pueblo b { font-size: 17px; margin: 10px 4px 2px; } .pueblo span { margin: 0 4px; font-size: 12px; }
  .caja { padding: 20px; }
  .barras li { grid-template-columns: 66px 1fr 42px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revela { opacity: 1; transform: none; }
  .barras b { transform: none; }
  ::view-transition-group(*) { animation: none !important; }
}

/* Vistas de los formatos (precio y ejemplos) */
.vistas { display: grid; grid-template-columns: 1fr .62fr 1fr; gap: 22px; align-items: end; margin-top: 30px; }
.vistas figure { margin: 0; text-align: center; transition: transform .4s var(--muelle); }
.vistas figure:hover { transform: translateY(-6px); }
.vistas .v { position: relative; border-radius: 8px; overflow: hidden; background: var(--blanco); box-shadow: 0 2px 4px rgba(60,40,20,.06), 0 26px 50px -26px rgba(60,40,20,.55); }
.vistas .v canvas { width: 100%; height: auto; }
.vistas figcaption { margin: 12px 0 0; font-size: 14px; font-weight: 700; }
.vistas figcaption span { display: block; font-weight: 500; color: var(--suave); font-size: 13px; }
.vistas .ancha { grid-column: 1 / 3; }
.vistas .movil .v { border-radius: 26px; border: 6px solid var(--tinta); }
.vistas .movil .v::before { content: "15:36"; position: absolute; left: 0; right: 0; top: 13%; text-align: center; font-size: clamp(22px, 4vw, 40px); font-weight: 300; color: var(--tinta); opacity: .75; }
.vistas .movil .v::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 4%; height: 7%; border-radius: 12px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(43,33,24,.1); }
.vistas canvas.gif { aspect-ratio: 1; }
@media (max-width: 760px) { .vistas { grid-template-columns: 1fr 1fr; gap: 16px; } .vistas .ancha { grid-column: 1 / -1; } }
.pueblo .foto { display: block; }
.capas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; align-items: center; margin-top: 30px; }
.capas ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.capas li button { width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--linea); background: #fff; font-weight: 600; line-height: 1.4; color: var(--suave); transition: border-color .15s, transform .15s; }
.capas li button b { display: block; color: var(--tinta); font-size: 16px; }
.capas li button:hover { transform: translateX(3px); }
.capas li button[aria-pressed="true"] { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(232,115,90,.15); }
@media (max-width: 860px) { .capas { grid-template-columns: 1fr; } }