/* Mesa de trabajo: las fotos se apoyan como maquetas sobre la mesa, con etiquetas de papel
   pinchadas en palitos; los colores salen del logo (verde bosque, cacao, caramelo y sol). */
:root {
  --papel: #FBF7EF;
  --hoja: #FFFFFF;
  --crema: #F2E6D0;
  --tinta: #2A2119;
  --tinta-suave: #66574A;
  --linea: #E3D7C4;
  --mini: #3B5737;
  --mundo: #5D3521;
  --salvia: #5F7E54;
  --caramelo: #C6935D;
  --sol: #EBB13D;
  --accion: #3B5737;
  --accion-hover: #2E472B;
  --accion-texto: #FFFFFF;
  --banda: #3B5737;
  --banda-tarjeta: #46653F;
  --banda-texto: #F7F1E4;
  --banda-suave: #D2DFC8;
  --pie: #3E2416;
  --pie-texto: #F2E6D0;
  --pie-suave: #CDB89D;
  --etiqueta: #FFFFFF;
  --etiqueta-texto: #1F1913;
  --etiqueta-borde: #1F1913;
  --burbuja: #DDF0D2;
  --alerta: #A3361B;
  --chip-logo: #F6EDDC;
  --sombra: rgb(42 33 25 / .16);
  --velo: rgb(14 18 13 / .88);
  --foto-fondo: #11160F;

  --f-display: "Fredoka", "Baloo 2", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --f-texto: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ancho: 1200px;
  --radio: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #121811; --hoja: #1A2218; --crema: #222C1F; --tinta: #F1E9DB; --tinta-suave: #B6AB98;
    --linea: #303D2C; --mini: #A2C691; --mundo: #DFAC7A; --salvia: #A2C691; --caramelo: #D3A06A;
    --sol: #F0BE52; --accion: #A2C691; --accion-hover: #B7D6A8; --accion-texto: #0F160E;
    --banda: #1C2A1A; --banda-tarjeta: #253623; --banda-texto: #F1E9DB; --banda-suave: #B3C8A8;
    --pie: #0B100A; --pie-texto: #EADFCB; --pie-suave: #A99D89;
    --etiqueta: #F6EFE2; --etiqueta-texto: #1F1913; --etiqueta-borde: #0E0B08;
    --burbuja: #24402A; --sombra: rgb(0 0 0 / .5); --alerta: #F0A17E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #121811; --hoja: #1A2218; --crema: #222C1F; --tinta: #F1E9DB; --tinta-suave: #B6AB98;
  --linea: #303D2C; --mini: #A2C691; --mundo: #DFAC7A; --salvia: #A2C691; --caramelo: #D3A06A;
  --sol: #F0BE52; --accion: #A2C691; --accion-hover: #B7D6A8; --accion-texto: #0F160E;
  --banda: #1C2A1A; --banda-tarjeta: #253623; --banda-texto: #F1E9DB; --banda-suave: #B3C8A8;
  --pie: #0B100A; --pie-texto: #EADFCB; --pie-suave: #A99D89;
  --etiqueta: #F6EFE2; --etiqueta-texto: #1F1913; --etiqueta-borde: #0E0B08;
  --burbuja: #24402A; --sombra: rgb(0 0 0 / .5); --alerta: #F0A17E;
  color-scheme: dark;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--f-texto); font-size: 1.0625rem; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.wrap {
  max-width: var(--ancho); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 700px) {
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

/* ---------- pantalla de carga: el logo y una regla que se va llenando ---------- */
.cargador { display: none; }
.cargando .cargador {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--papel);
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
           max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  animation: cargador-seguro .5s 10s forwards; /* si algo falla, nunca se queda pegada */
}
.cargando.saliendo .cargador { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
@keyframes cargador-seguro { to { opacity: 0; visibility: hidden; } }
.cargador-caja { display: flex; flex-direction: column; align-items: center; gap: 26px; transition: transform .6s ease; }
.saliendo .cargador-caja { transform: translateY(-10px); }
.cargador-logo {
  background: var(--chip-logo); border-radius: 30px; padding: clamp(16px, 4vw, 26px) clamp(18px, 4.5vw, 30px);
  box-shadow: 0 2px 4px var(--sombra), 0 26px 50px -24px var(--sombra);
  animation: logo-entra .8s cubic-bezier(.2, .8, .2, 1) backwards;
}
.cargador-logo img { width: min(280px, 60vw); }
@keyframes logo-entra { from { opacity: 0; transform: translateY(14px) scale(.95); } }
.carga-regla {
  position: relative; width: min(300px, 72vw); height: 18px; border-radius: 5px; overflow: hidden;
  background: var(--crema); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mundo) 35%, transparent);
}
.carga-relleno { position: absolute; inset: 0; background: var(--sol); transform-origin: left center; transform: scaleX(0); }
.carga-regla::after { /* las rayitas de la regla: cada 14 px una corta, cada 70 px una larga */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 13px, var(--mundo) 13px 14.5px) left top / 100% 34% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 69px, var(--mundo) 69px 70.5px) left top / 100% 64% no-repeat;
}
.carga-texto {
  display: flex; align-items: baseline; gap: .6em;
  font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--tinta-suave);
}
.carga-texto b { color: var(--mundo); font-variant-numeric: tabular-nums; min-width: 3.2em; }

/* la portada espera a que se vaya la pantalla de carga para animarse */
.cargando:not(.saliendo) .portada-texto > *,
.cargando:not(.saliendo) .collage .a,
.cargando:not(.saliendo) .collage .b { animation-play-state: paused; }

/* ---------- piezas comunes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--f-display); font-weight: 600; font-size: 1.06rem; line-height: 1.1;
  padding: .85em 1.35em; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease;
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn-primario { background: var(--accion); color: var(--accion-texto); }
.btn-primario:hover { background: var(--accion-hover); transform: translateY(-1px); }
.btn-borde { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.btn-borde:hover { background: var(--crema); }

.ojo {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mundo);
}
.ojo svg { width: 22px; height: 16px; flex: none; }

.etiqueta {
  position: relative; display: inline-block;
  font-family: var(--f-display); font-weight: 600; font-size: 1rem; line-height: 1.2;
  background: var(--etiqueta); color: var(--etiqueta-texto);
  border: 2px solid var(--etiqueta-borde); border-radius: 4px;
  padding: .3em .7em; transform: rotate(-1.6deg);
  box-shadow: 2px 3px 0 var(--sombra);
}
.etiqueta::before { /* el palito que sostiene la etiqueta */
  content: ""; position: absolute; left: 1.1em; bottom: calc(100% + 2px);
  width: 3px; height: 20px; border-radius: 2px 2px 0 0; background: var(--caramelo);
}

.seccion { padding-block: clamp(64px, 9vw, 112px); }
.seccion-cabeza {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px 48px; margin-bottom: clamp(32px, 4.5vw, 52px);
}
.seccion-cabeza > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.seccion-cabeza h2 { font-size: clamp(2.1rem, 1.4rem + 2.5vw, 3.1rem); color: var(--tinta); }
.seccion-cabeza > p { max-width: 34em; color: var(--tinta-suave); }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: var(--papel);
  background: color-mix(in srgb, var(--papel) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera .wrap { display: flex; align-items: center; gap: 20px; min-height: 70px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-icono {
  width: 46px; height: 46px; border-radius: 13px; background: var(--chip-logo);
  display: grid; place-items: center; flex: none;
}
.marca-icono img { width: 36px; }
.marca-texto { font-family: var(--f-display); font-weight: 700; font-size: 1.55rem; line-height: 1; letter-spacing: -.01em; }
.m1 { color: var(--mini); }
.m2 { color: var(--mundo); }
.menu { margin-left: auto; display: flex; gap: 2px; }
.menu a {
  text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--tinta-suave);
  padding: 8px 13px; border-radius: 999px;
}
.menu a:hover { color: var(--tinta); background: var(--crema); }
.cabecera .btn { padding: .62em 1.1em; font-size: 1rem; }
@media (max-width: 1000px) {
  .menu { display: none; }
  .cabecera .btn { margin-left: auto; }
}
@media (max-width: 420px) {
  .marca-texto { font-size: 1.35rem; }
  .solo-ancho { display: none; }
}

/* ---------- portada ---------- */
.portada { padding-block: clamp(40px, 6vw, 84px) clamp(64px, 8vw, 112px); overflow: hidden; }
.portada .wrap {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px); align-items: center;
}
@media (max-width: 920px) { .portada .wrap { grid-template-columns: minmax(0, 1fr); } }
.portada-texto { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.portada-texto > * { animation: subir .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.portada-texto > :nth-child(2) { animation-delay: .07s; }
.portada-texto > :nth-child(3) { animation-delay: .14s; }
.portada-texto > :nth-child(4) { animation-delay: .21s; }
.portada-texto > :nth-child(5) { animation-delay: .28s; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }
.portada h1 { font-size: clamp(2.15rem, 1rem + 3vw, 3.9rem); letter-spacing: -.015em; }
@media (max-width: 360px) { .portada h1 { font-size: 1.9rem; } }
.portada h1 .l1 { color: var(--mini); }
.portada h1 .l2 { color: var(--mundo); }
/* el lema va debajo del título, con la regla de medir bajo "pequeña escala" */
.lema-portada {
  font-family: var(--f-display); font-weight: 600; line-height: 1.2; color: var(--mundo);
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.8rem); margin-top: -6px;
}
.regla { position: relative; display: inline-block; padding-bottom: .36em; white-space: nowrap; }
.regla::after { /* regla de medir: la "pequeña escala" del lema */
  content: ""; position: absolute; left: 0; right: .25em; bottom: 0; height: .27em; border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, var(--mundo) 0 2px, transparent 2px .42em) left top / 100% 42% no-repeat,
    repeating-linear-gradient(90deg, var(--mundo) 0 2px, transparent 2px 2.1em) left top / 100% 78% no-repeat,
    var(--sol);
}
.portada .bajada { font-size: 1.2rem; color: var(--tinta-suave); max-width: 32em; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.datos { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0; list-style: none; font-size: .93rem; color: var(--tinta-suave); }
.datos li { display: inline-flex; align-items: center; gap: .45em; }
.datos svg { width: 1.1em; height: 1.1em; color: var(--salvia); flex: none; }

.collage { position: relative; padding: 14px 7% 64px 2%; min-width: 0; }
.foto-mesa {
  margin: 0; background: var(--hoja); padding: 10px; border-radius: 6px;
  box-shadow: 0 2px 4px var(--sombra), 0 22px 44px -16px var(--sombra);
}
.foto-mesa img { border-radius: 3px; width: 100%; }
.foto-mesa .etiqueta { position: absolute; }
.collage .a { position: relative; width: 90%; transform: rotate(-2.2deg); animation: apoyar-a .8s cubic-bezier(.2, .8, .2, 1) both; }
.collage .a .etiqueta { left: 26px; bottom: -22px; }
.collage .b { position: absolute; width: 37%; right: 0; bottom: 0; transform: rotate(3.4deg); animation: apoyar-b .8s .12s cubic-bezier(.2, .8, .2, 1) both; }
.collage .b .etiqueta { right: 14px; bottom: -20px; transform: rotate(2deg); }
.collage .b .etiqueta::before { left: auto; right: 1.1em; }
@keyframes apoyar-a { from { transform: translateY(-16px) rotate(-5deg); } }
@keyframes apoyar-b { from { transform: translateY(-22px) rotate(8deg); } }
.sello {
  position: absolute; left: -4px; top: -6px; z-index: 2; margin: 0;
  font-family: var(--f-display); font-weight: 600; font-size: .95rem; line-height: 1.15;
  background: var(--sol); color: var(--etiqueta-texto); padding: .7em .9em; border-radius: 12px;
  transform: rotate(-3deg); box-shadow: 2px 3px 0 var(--sombra);
}
.sello b { display: block; font-size: 1.6rem; font-weight: 700; }
@media (max-width: 520px) { .sello { font-size: .82rem; } .sello b { font-size: 1.3rem; } }

/* ---------- temas ---------- */
.temas-banda { background: var(--crema); }
.temas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .temas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .temas { grid-template-columns: minmax(0, 1fr); } }
.tema {
  display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer;
  background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
  text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.tema:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px var(--sombra); }
.tema img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tema-cuerpo { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.tema-h { font-family: var(--f-display); font-weight: 700; line-height: 1.1; font-size: 1.3rem; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--tinta); }
.tema-h h3 { font-size: inherit; line-height: inherit; }
.tema .cuenta { font-family: var(--f-texto); font-weight: 500; font-size: .84rem; color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tema p { font-size: .95rem; color: var(--tinta-suave); }
.tema-otro { background: var(--banda); color: var(--banda-texto); border-color: transparent; justify-content: center; gap: 16px; padding: 30px 26px; }
.tema-otro .tema-h { font-size: 1.7rem; display: block; }
.tema-otro p { color: var(--banda-suave); font-size: 1rem; }
.tema-otro .flecha { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; color: var(--sol); }
.tema-otro .rayos { width: 44px; height: 32px; color: var(--sol); }

/* ---------- galería ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.chip {
  display: inline-flex; align-items: baseline; text-decoration: none;
  font-size: .92rem; font-weight: 500; padding: .5em 1.05em; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--linea); background: var(--hoja); color: var(--tinta);
}
.chip:hover { border-color: var(--tinta-suave); }
.chip .n { color: var(--tinta-suave); margin-left: .35em; font-variant-numeric: tabular-nums; }
/* Los filtros son enlaces a #ver-<tema> y los aplica el CSS con :target, así funcionan aunque no haya
   JavaScript. Las reglas de cada tema las escribe herramientas/generar_paginas.py entre las marcas de abajo. */
.ancla-filtro { display: block; height: 0; }
.chip-todas { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.chip-todas .n { color: inherit; opacity: .7; }
.ancla-filtro:target ~ .filtros .chip-todas { background: var(--hoja); border-color: var(--linea); color: var(--tinta); }
.ancla-filtro:target ~ .filtros .chip-todas .n { color: var(--tinta-suave); opacity: 1; }
/* filtros:inicio */
#ver-cuerpo:target ~ .filtros [href="#ver-cuerpo"], #ver-ambiente:target ~ .filtros [href="#ver-ambiente"], #ver-peru:target ~ .filtros [href="#ver-peru"], #ver-vida:target ~ .filtros [href="#ver-vida"], #ver-espacio:target ~ .filtros [href="#ver-espacio"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
#ver-cuerpo:target ~ .filtros [href="#ver-cuerpo"] .n, #ver-ambiente:target ~ .filtros [href="#ver-ambiente"] .n, #ver-peru:target ~ .filtros [href="#ver-peru"] .n, #ver-vida:target ~ .filtros [href="#ver-vida"] .n, #ver-espacio:target ~ .filtros [href="#ver-espacio"] .n { color: inherit; opacity: .7; }
#ver-cuerpo:target ~ .galeria .pieza:not([data-c="cuerpo"]),
#ver-ambiente:target ~ .galeria .pieza:not([data-c="ambiente"]),
#ver-peru:target ~ .galeria .pieza:not([data-c="peru"]),
#ver-vida:target ~ .galeria .pieza:not([data-c="vida"]),
#ver-espacio:target ~ .galeria .pieza:not([data-c="espacio"]) { display: none; }
/* filtros:fin */
.galeria { columns: 4 230px; column-gap: 24px; }
.pieza { break-inside: avoid; margin: 0 0 34px; }
.pieza-foto { display: block; cursor: zoom-in; border-radius: 10px; }
.pieza img {
  width: 100%; border-radius: 10px; background: var(--crema);
  box-shadow: 0 1px 2px var(--sombra), 0 12px 26px -16px var(--sombra);
  transition: transform .22s ease, box-shadow .22s ease;
}
.pieza-foto:hover img { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 2px 4px var(--sombra), 0 22px 36px -18px var(--sombra); }
.pieza figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 16px 0 0 6px; }
.pieza:nth-child(even) .etiqueta { transform: rotate(1.3deg); }
.pieza .cat { font-size: .8rem; color: var(--tinta-suave); }
@media (max-width: 600px) {
  .galeria { columns: 2; column-gap: 14px; }
  .pieza { margin-bottom: 24px; }
  .pieza figcaption { padding: 14px 0 0 2px; gap: 5px; }
  .pieza .etiqueta { font-size: .84rem; }
  .pieza .cat { font-size: .74rem; }
}
.galeria-pie { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; text-align: center; }
.galeria-pie p { font-size: .98rem; color: var(--tinta-suave); }
.enlaces-tema { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.enlace-tema {
  display: inline-flex; align-items: center; gap: .4em; text-decoration: none;
  font-family: var(--f-display); font-weight: 600; font-size: 1rem; padding: .5em 1em; border-radius: 999px;
  background: var(--crema); color: var(--tinta);
}
.enlace-tema::after { content: "→"; color: var(--mundo); }
.enlace-tema:hover { background: color-mix(in srgb, var(--sol) 35%, var(--crema)); }
.enlace-mas { font-family: var(--f-display); font-weight: 600; color: var(--mini); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.enlace-mas:hover { color: var(--tinta); }

/* ---------- apoyo en tareas ---------- */
.tareas-banda { background: var(--crema); }
.tareas { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 980px) { .tareas { grid-template-columns: minmax(0, 1fr); } }
.tareas-intro { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (min-width: 981px) { .tareas-intro { position: sticky; top: 100px; } }
.tareas-intro h2 { font-size: clamp(2.1rem, 1.4rem + 2.5vw, 3.1rem); color: var(--tinta); }
.tareas-intro > p { color: var(--tinta-suave); max-width: 32em; }
.niveles { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.niveles li { font-size: .84rem; font-weight: 500; padding: .35em .85em; border-radius: 999px; background: var(--hoja); border: 1px solid var(--linea); }
.etica {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px;
  background: var(--hoja); border-left: 4px solid var(--sol); font-size: .92rem; color: var(--tinta-suave);
}
.etica svg { width: 22px; height: 22px; flex: none; color: var(--mini); margin-top: 1px; }
.etica b { color: var(--tinta); font-weight: 600; }
.servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 600px) { .servicios { grid-template-columns: minmax(0, 1fr); } }
.servicio { /* como una hoja de cuaderno: con su margen a la izquierda */
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 20px 20px 22px 72px;
}
.servicio::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 56px;
  border-left: 2px solid color-mix(in srgb, var(--caramelo) 60%, transparent);
}
.servicio-icono { position: absolute; left: 14px; top: 18px; width: 30px; height: 30px; color: var(--mini); }
.servicio h3 { font-size: 1.22rem; color: var(--tinta); }
.servicio p { font-size: .95rem; color: var(--tinta-suave); }

/* ---------- cómo pedir ---------- */
.pedir-banda { background: var(--papel); }
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 900px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pasos { grid-template-columns: minmax(0, 1fr); } }
.paso { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.paso-top { display: flex; align-items: center; gap: 14px; }
.paso-top::after { content: ""; flex: 1; border-top: 2px dashed var(--caramelo); }
.paso:last-child .paso-top::after { visibility: hidden; }
@media (max-width: 900px) { .paso-top::after { visibility: hidden; } }
.paso .num {
  width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--f-display); font-weight: 700; font-size: 1.15rem;
  background: var(--accion); color: var(--accion-texto);
}
.paso h3 { font-size: 1.32rem; }
.paso p { color: var(--tinta-suave); font-size: .98rem; }

.armar {
  margin-top: clamp(48px, 7vw, 80px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px); background: var(--hoja); border-radius: 20px; padding: clamp(22px, 4vw, 44px);
  border: 1px solid var(--linea);
}
@media (max-width: 860px) { .armar { grid-template-columns: minmax(0, 1fr); } }
.armar h3 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.1rem); }
.armar form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
.armar .cabeza-form { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.armar .cabeza-form p { color: var(--tinta-suave); font-size: .98rem; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
@media (max-width: 520px) { .campo { grid-column: 1 / -1; } }
.campo label { font-size: .86rem; font-weight: 500; }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 1rem; color: var(--tinta); background: var(--papel);
  border: 1.5px solid var(--linea); border-radius: 10px; padding: .7em .85em; width: 100%; box-sizing: border-box;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input[aria-invalid="true"] { border-color: var(--alerta); }
.campo-aviso { font-size: .82rem; color: var(--alerta); }
/* lista de temas propia: el datalist del navegador no aparece en muchos celulares */
.combo { position: relative; }
.combo input { padding-right: 2.8em; }
.combo-flecha {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--tinta-suave); cursor: pointer;
}
.combo-flecha svg { width: 20px; height: 20px; transition: transform .2s ease; }
.combo-flecha[aria-expanded="true"] svg { transform: rotate(180deg); }
.combo-lista {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none; max-height: min(280px, 45vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--hoja); border: 1.5px solid var(--linea); border-radius: 12px;
  box-shadow: 0 18px 36px -14px var(--sombra);
}
.combo-lista li { padding: .62em .8em; border-radius: 8px; cursor: pointer; font-size: .98rem; line-height: 1.3; }
.combo-lista li:hover, .combo-lista li[aria-selected="true"] { background: var(--crema); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--accion); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accion) 25%, transparent); }
.vista { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vista-titulo { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.chat { background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; padding: 18px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; }
.burbuja {
  align-self: flex-end; max-width: 92%; background: var(--burbuja); color: var(--tinta);
  border-radius: 16px 16px 4px 16px; padding: 12px 14px; font-size: .96rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px var(--sombra);
}
.vista .btn { align-self: stretch; }
.nota { font-size: .84rem; color: var(--tinta-suave); }
.nota a { color: var(--tinta); }
.adelanto {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--sol) 22%, var(--hoja)); color: var(--tinta); font-size: .92rem; line-height: 1.45;
}
.adelanto .pct { flex: none; font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--mundo); }

/* ---------- contacto ---------- */
.contacto { background: var(--banda); color: var(--banda-texto); }
.contacto .seccion-cabeza h2 { color: var(--banda-texto); }
.contacto .seccion-cabeza > p { color: var(--banda-suave); }
.contacto .ojo { color: var(--sol); }
.canales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.canal-ubicacion { grid-column: 1 / -1; }
@media (min-width: 1180px) {
  .canales { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .canal { grid-column: span 2; }
  .canal-grande { grid-column: span 3; }
}
@media (max-width: 560px) { .canales { grid-template-columns: minmax(0, 1fr); } }
.canal { background: var(--banda-tarjeta); border-radius: var(--radio); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.canal-icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--sol); color: var(--etiqueta-texto); }
.canal-icono svg { width: 22px; height: 22px; }
.canal h3 { font-size: 1.05rem; font-weight: 600; color: var(--banda-suave); font-family: var(--f-texto); }
.canal .valor { font-family: var(--f-display); font-weight: 600; font-size: 1.45rem; line-height: 1.2; user-select: all; overflow-wrap: anywhere; }
.canal .valor.chico { font-size: 1.04rem; }
.canal .nota { color: var(--banda-suave); }
.canal-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.mini-btn {
  display: inline-flex; align-items: center; gap: .45em; font-size: .88rem; font-weight: 500;
  padding: .5em .9em; border-radius: 999px; text-decoration: none; cursor: pointer;
  background: transparent; color: var(--banda-texto); border: 1.5px solid color-mix(in srgb, var(--banda-texto) 40%, transparent);
}
.mini-btn:hover { background: color-mix(in srgb, var(--banda-texto) 12%, transparent); }
.mini-btn.lleno { background: var(--banda-texto); color: var(--banda); border-color: var(--banda-texto); }
.mini-btn svg { width: 1.05em; height: 1.05em; }
/* reseñas en Google: una franja color sol, como la etiqueta de papel */
.resena {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  background: var(--sol); color: var(--etiqueta-texto); border-radius: var(--radio); padding: 24px clamp(20px, 3vw, 32px);
}
.resena-texto { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 380px; }
.estrellas { display: flex; gap: 4px; }
.estrellas svg { width: 22px; height: 22px; }
.resena h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); }
.resena p { font-size: .98rem; max-width: 58ch; }
.resena :focus-visible { outline-color: var(--etiqueta-texto); }
.btn-resena { background: var(--etiqueta-texto); color: var(--etiqueta); flex: none; }
.btn-resena:hover { background: color-mix(in srgb, var(--etiqueta-texto) 82%, var(--sol)); transform: translateY(-1px); }

/* ---------- legal ---------- */
.legal { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 980px) { .legal { grid-template-columns: minmax(0, 1fr); } }
.legal-intro { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.legal-intro h2 { font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); color: var(--tinta); }
.legal-intro > p { color: var(--tinta-suave); }
.resumen { background: var(--crema); border-radius: var(--radio); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.resumen h3 { font-size: 1.15rem; color: var(--tinta); }
.resumen ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: .94rem; color: var(--tinta-suave); }
.resumen li { display: flex; gap: .6em; align-items: baseline; }
.resumen li::before { content: ""; flex: none; width: .55em; height: .55em; border-radius: 2px; background: var(--sol); transform: rotate(45deg) translateY(-1px); }
.resumen b { color: var(--tinta); font-weight: 600; }
.documentos { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.doc { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); }
.doc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: var(--radio);
}
.doc summary::-webkit-details-marker { display: none; }
.doc summary:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.doc-icono { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--crema); color: var(--mini); }
.doc-icono svg { width: 22px; height: 22px; }
.doc-titulo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.doc summary h3 { font-size: 1.3rem; color: var(--tinta); }
.doc-sub { font-size: .88rem; color: var(--tinta-suave); }
.doc .flechita { margin-left: auto; width: 22px; height: 22px; flex: none; color: var(--tinta-suave); transition: transform .2s ease; }
.doc[open] .flechita { transform: rotate(180deg); }
.doc-cuerpo { padding: 4px 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.doc-cuerpo > p { color: var(--tinta-suave); font-size: .96rem; max-width: 62ch; }
.clausulas { margin: 0; padding: 0; list-style: none; counter-reset: clausula; display: flex; flex-direction: column; gap: 14px; max-width: 64ch; }
.clausulas li { counter-increment: clausula; position: relative; padding-left: 2.4em; font-size: .96rem; color: var(--tinta-suave); }
.clausulas li::before {
  content: counter(clausula); position: absolute; left: 0; top: .05em;
  width: 1.65em; height: 1.65em; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 600; font-size: .85rem; background: var(--crema); color: var(--mundo);
}
.clausulas b { color: var(--tinta); font-weight: 600; }
.clausulas li.clave::before { background: var(--sol); color: var(--etiqueta-texto); }
.doc-fecha { font-size: .82rem; color: var(--tinta-suave); padding-top: 12px; border-top: 1px dashed var(--linea); }

/* ---------- pie ---------- */
.pie { background: var(--pie); color: var(--pie-texto); padding-block: 48px calc(32px + env(safe-area-inset-bottom, 0px)); }
.pie .wrap { display: flex; flex-direction: column; gap: 30px; }
.pie-arriba { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.pie-abajo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px;
  padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--pie-texto) 18%, transparent);
  font-size: .86rem; color: var(--pie-suave);
}
.pie .pie-abajo nav { font-size: .86rem; }
.pie-logo { background: var(--chip-logo); border-radius: 16px; padding: 14px 18px; }
.pie-logo img { width: 190px; }
.pie-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 260px; }
.pie-texto .lema { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; }
.pie-texto p { color: var(--pie-suave); font-size: .9rem; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .92rem; }
.pie nav a { color: var(--pie-suave); text-decoration: none; }
.pie nav a:hover { color: var(--pie-texto); text-decoration: underline; }
.pie-temas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: .92rem; }
.pie-temas b { font-family: var(--f-display); font-weight: 600; color: var(--pie-texto); }

/* ---------- páginas de cada tema ---------- */
.migas { font-size: .88rem; color: var(--tinta-suave); padding-top: 22px; }
.migas ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.migas li { display: inline-flex; align-items: center; min-width: 0; }
.migas li + li::before { content: "›"; margin-inline: .55em; color: var(--caramelo); font-weight: 600; }
.migas a { color: var(--tinta-suave); text-underline-offset: 3px; }
.migas a:hover { color: var(--tinta); }
.migas [aria-current="page"] { color: var(--tinta); font-weight: 500; }
.portada-tema { padding-block: clamp(26px, 4vw, 52px) clamp(56px, 7vw, 96px); }
.portada-tema h1 { font-size: clamp(2.05rem, 1rem + 2.7vw, 3.45rem); color: var(--mini); }
.portada-tema h1 .l2 { color: var(--mundo); }
.portada-tema .intro { display: flex; flex-direction: column; gap: 14px; max-width: 36em; }
.portada-tema .intro p { font-size: 1.12rem; color: var(--tinta-suave); }
.collage-uno { padding: 14px 4% 40px; }
.collage-uno .a { width: 100%; }
.sin-foto { /* apoyo académico: no hay fotos de trabajos, así que va una hoja de cuaderno con los niveles */
  position: relative; background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 26px 24px 26px 76px; display: flex; flex-direction: column; gap: 16px; transform: rotate(1.2deg);
  box-shadow: 0 2px 4px var(--sombra), 0 22px 44px -16px var(--sombra);
}
.sin-foto::before { content: ""; position: absolute; top: 0; bottom: 0; left: 56px; border-left: 2px solid color-mix(in srgb, var(--caramelo) 60%, transparent); }
.sin-foto .niveles li { background: var(--crema); }

.grupo + .grupo { margin-top: clamp(40px, 6vw, 64px); }
.grupo-cabeza { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; max-width: 46em; }
.grupo-cabeza h2 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem); color: var(--tinta); }
.grupo-cabeza p { color: var(--tinta-suave); }
.galeria-tema { columns: 3 250px; }
.mas-catalogo { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: clamp(36px, 5vw, 52px); }
.pieza-desc { font-size: .92rem; color: var(--tinta-suave); line-height: 1.5; }
@media (max-width: 600px) { .galeria-tema { columns: 2; } .pieza-desc { font-size: .84rem; } }

.pedir-tema { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (max-width: 860px) { .pedir-tema { grid-template-columns: minmax(0, 1fr); } }
.pedir-tema h2 { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.3rem); color: var(--tinta); }
.pedir-tema .resumen { padding: 24px 26px; gap: 16px; }
.pedir-tema .resumen ul { font-size: 1rem; gap: 12px; }
.pasos-mini { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.pasos-mini li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; color: var(--tinta-suave); }
.pasos-mini .num {
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--f-display); font-weight: 700; background: var(--accion); color: var(--accion-texto);
}
.pasos-mini b { color: var(--tinta); font-weight: 600; }
.pedir-tema .nota { margin-top: 18px; }

.cta-banda { background: var(--banda); color: var(--banda-texto); }
.cta-banda .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
.cta-banda h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.cta-texto { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 420px; }
.cta-texto p { color: var(--banda-suave); max-width: 38em; }
.cta-texto .tel { font-family: var(--f-display); font-weight: 600; color: var(--banda-texto); user-select: all; }
.btn-claro { background: var(--banda-texto); color: var(--banda); }
.btn-claro:hover { background: color-mix(in srgb, var(--banda-texto) 85%, var(--sol)); transform: translateY(-1px); }
.cta-banda :focus-visible { outline-color: var(--sol); }

.relacionadas { background: var(--crema); }
.relacionadas .seccion-cabeza { margin-bottom: 30px; }
.temas-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .temas-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .temas-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- botón flotante ---------- */
.flotante {
  position: fixed; z-index: 50;
  right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accion); color: var(--accion-texto);
  box-shadow: 0 6px 18px -4px var(--sombra), 0 0 0 4px color-mix(in srgb, var(--papel) 70%, transparent);
  transition: transform .15s ease;
}
.flotante:hover { transform: scale(1.06); }
.flotante svg { width: 28px; height: 28px; }

/* ---------- visor de fotos ---------- */
.visor {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
           max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.visor-fondo { position: absolute; inset: 0; background: var(--velo); }
.visor-caja {
  position: relative; width: 100%; max-width: 1180px; max-height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  background: var(--hoja); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6);
}
.visor-foto { margin: 0; background: var(--foto-fondo); display: grid; place-items: center; min-height: 0; }
.visor-foto img { max-height: min(84vh, 920px); width: auto; max-width: 100%; object-fit: contain; }
.visor-info { padding: 30px 26px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow-y: auto; }
.visor-info .cat { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mundo); }
.visor-info h3 { font-size: 1.8rem; color: var(--tinta); }
.visor-info p { color: var(--tinta-suave); }
.visor-nav { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--linea); }
.visor-nav span { font-size: .9rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.redondo {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--papel); color: var(--tinta); border: 1.5px solid var(--linea);
}
.redondo:hover { border-color: var(--tinta); }
.redondo svg { width: 22px; height: 22px; }
.visor .cerrar { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--hoja); border-color: transparent; box-shadow: 0 2px 10px rgb(0 0 0 / .3); }
@media (max-width: 820px) {
  .visor { padding-block: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-bottom, 0px)); }
  .visor-caja { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, auto) auto; }
  .visor-foto img { max-height: 58vh; }
  .visor-info { padding: 18px 18px 16px; gap: 10px; }
  .visor-info h3 { font-size: 1.4rem; }
}