/* =========================================================
   Cartagena Social Club · implementación v03 (sobre la base v02)
   Dirección: crema + ladrillo, acento oliva, contornos rectos de 1 px.
   Tipografía: Roboto Black (900) titulares y labels; Roboto Regular (400)
   lectura y controles. Fuentes autoalojadas en fonts/ (licencia Apache 2).
   Medidas según TOKENS_v03.txt y los artboards 01–25.
   ========================================================= */

@font-face { font-family: "Roboto CSC"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/Roboto-Black.woff") format("woff"), url("../fonts/Roboto-Black.ttf") format("truetype"); }
@font-face { font-family: "Roboto CSC"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Roboto-Regular.woff") format("woff"), url("../fonts/Roboto-Regular.ttf") format("truetype"); }

:root {
  /* Colores efectivos v03 */
  --crema: #F1E5CF;        /* fondo de página, tarjetas y botones secundarios */
  --papel: #F7F2E8;        /* campos, paneles de estado y cajas de apoyo */
  --tinta: #2B201B;        /* texto principal, iconos, chips activos, bordes fuertes */
  --ladrillo: #813D2D;     /* links pequeños, CTA primario, error, activo */
  --terracota: #B64D32;    /* slogan y titulares grandes de marca */
  --oliva: #535B3F;        /* eyebrows, etiquetas, regla del pie */
  --arena: #D6B99A;        /* skeletons y controles no disponibles */
  --texto-2: #655B4C;      /* descripciones secundarias, ayudas, placeholders */
  --linea: #B4A78E;        /* separadores, bordes de campos y chips inactivos */

  --fuente: "Roboto CSC", "Roboto", "Inter", "Liberation Sans", Arial, sans-serif;
  --m: 20px;               /* margen lateral móvil */
  --ancho: 1328px;         /* área útil máxima */
  --cab: 96px;             /* cabecera móvil */
  --chip-h: 44px;          /* chips móvil */
  --foco: var(--tinta);
}
@media (min-width: 768px) { :root { --m: clamp(24px, 3.9vw, 56px); --cab: 112px; --chip-h: 36px; } .solo-movil { display: none !important; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--fuente);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }

img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--m), var(--ancho)); margin-inline: auto; }

/* Foco visible: contorno tinta de 2 px separado 3 px (ST26) */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
h1[tabindex="-1"]:focus, .panel-estado[tabindex="-1"]:focus { outline: none; }
.skip { position: absolute; left: var(--m); top: -60px; background: var(--tinta); color: var(--crema); padding: 10px 14px; z-index: 50; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Tipografía ---------- */
.eyebrow { font-size: 11px; line-height: 1.25; letter-spacing: .02em; text-transform: uppercase; color: var(--oliva); }
.h1 { font-weight: 900; font-size: clamp(44px, 5.28vw, 76px); line-height: 1.04; color: var(--tinta); margin-top: 16px; overflow-wrap: anywhere; }
.h1-sub { font-size: 18px; line-height: 1.3; margin-top: 16px; }
.h1-nota { font-size: 16px; line-height: 1.4; color: var(--texto-2); margin-top: 14px; }
.seccion-t { font-weight: 900; font-size: 28px; line-height: 1.25; }
.seccion-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.seccion-cab .mas { font-size: 15px; white-space: nowrap; }
@media (min-width: 768px) {
  .eyebrow { font-size: 12px; }
  .h1-sub { font-size: 22px; margin-top: 20px; }
  .seccion-t { font-size: 38px; }
}

.mas, .link-flecha { color: var(--ladrillo); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.mas:hover, .link-flecha:hover { text-decoration: underline; }
.mas svg, .link-flecha svg { width: 18px; height: 12px; flex: none; }
.link { background: none; border: 0; padding: 0; color: var(--ladrillo); text-decoration: underline; cursor: pointer; font-size: inherit; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 1px solid var(--ladrillo); border-radius: 0; background: var(--crema); color: var(--tinta); font-size: 15px; line-height: 1.25; text-decoration: none; cursor: pointer; text-align: center; }
.btn-primario { background: var(--ladrillo); border-color: var(--ladrillo); color: var(--crema); }
.btn-primario:hover { background: #6E3326; }
.btn:hover { text-decoration: none; }
.btn-secundario:hover { background: var(--papel); }
.btn-inactivo, .btn[aria-disabled="true"], .btn:disabled { background: var(--arena); border-color: var(--arena); color: var(--tinta); cursor: default; }
.btn-bloque { width: 100%; }
.btn-peligro { border-color: var(--ladrillo); color: var(--ladrillo); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* Botón de icono 44×44 (objetivo táctil mínimo) */
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--tinta); background: transparent; color: var(--tinta); cursor: pointer; padding: 0; text-decoration: none; position: relative; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.icon-btn.sin-borde { border-color: transparent; }
.icon-btn .conteo { position: absolute; right: -6px; top: -6px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--ladrillo); color: var(--crema); font-size: 11px; line-height: 18px; text-align: center; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: var(--chip-h); padding: 0 14px; border: 1px solid var(--linea); background: var(--crema); color: var(--tinta); font-size: 13px; line-height: 1.25; cursor: pointer; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--tinta); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.chip .x { font-size: 14px; line-height: 1; }

/* ---------- Cabecera ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--crema); }
.top-row { height: var(--cab); display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--linea); }
.brand { display: block; flex: none; margin-right: auto; }
.brand img { width: 140px; height: auto; }
.nav { display: none; }
.nav a { font-size: 16px; line-height: 1.25; text-decoration: none; color: var(--tinta); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--linea); }
.nav a[aria-current="page"] { color: var(--ladrillo); border-bottom-color: var(--ladrillo); }
.top-acciones { display: flex; align-items: center; gap: 12px; }
.top-acciones .btn-cab { display: none; }
@media (min-width: 768px) {
  .brand img { width: 150px; }
  .nav { display: flex; gap: 24px; margin-right: auto; margin-left: 24px; }
  .top-acciones { gap: 16px; }
  .top-acciones .btn-cab { display: inline-flex; min-height: 44px; padding: 0 16px; white-space: nowrap; }
  .top-acciones .menu-btn { display: none; }
}
@media (min-width: 1120px) {
  .brand img { width: 174px; }
  .brand { margin-right: 0; }
  .nav { gap: 50px; margin-left: clamp(60px, 22vw, 330px); margin-right: auto; }
  .top-acciones { gap: 26px; }
  .top-acciones .btn-cab { padding: 0 32px; min-width: 204px; }
}
.top-acciones .fav-btn[aria-pressed="true"] svg { fill: currentColor; }

/* ---------- Vistas ---------- */
.vista { padding-top: 32px; padding-bottom: 56px; }
.vista-cab { margin-bottom: 32px; }
@media (min-width: 768px) { .vista { padding-bottom: 80px; } .vista-cab { margin-bottom: 40px; } }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--oliva); padding: 36px 0 32px; }
.pie-row { display: grid; gap: 10px; }
.pie-marca { font-weight: 900; font-size: 18px; line-height: 1.2; }
.pie-linea { font-size: 14px; }
.pie-links { font-size: 13px; color: var(--ladrillo); display: flex; gap: 12px; flex-wrap: wrap; }
.pie-links a { text-decoration: none; }
.pie-links a:hover { text-decoration: underline; }
.pie-nota { font-size: 11px; color: var(--texto-2); margin-top: 6px; }
@media (min-width: 768px) {
  .pie-row { grid-template-columns: 1fr auto; grid-template-areas: "marca links" "linea links" "nota nota"; align-items: start; }
  .pie-marca { grid-area: marca; font-size: 20px; }
  .pie-linea { grid-area: linea; font-size: 15px; }
  .pie-links { grid-area: links; font-size: 15px; }
  .pie-nota { grid-area: nota; font-size: 12px; margin-top: 10px; }
}

/* ---------- Portada (S01) ---------- */
.hero-media { aspect-ratio: 350 / 300; overflow: hidden; background: var(--arena); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .hero-media { aspect-ratio: 1328 / 400; } }
.slogan { font-weight: 900; text-transform: uppercase; color: var(--terracota); font-size: clamp(47px, 6.95vw, 100px); line-height: 1.02; margin-top: 44px; overflow-wrap: anywhere; }
.slogan span { display: block; }
@media (min-width: 768px) { .slogan span { display: inline; } .slogan { margin-top: 56px; } }
.descriptor { font-size: 16px; line-height: 1.3; margin-top: 18px; }
@media (min-width: 768px) { .descriptor { font-size: 20px; margin-top: 24px; } }
.portada-busqueda { margin-top: 32px; }
.portada-chips { margin-top: 28px; }
.portada-agenda { margin-top: 56px; }
.portada .portada-agenda ~ section { margin-top: 56px; }
.portada-agenda .tarjetas { margin-top: 24px; }
@media (min-width: 768px) { .portada-agenda { margin-top: 72px; } .portada-agenda .tarjetas { margin-top: 32px; } .portada .portada-agenda ~ section { margin-top: 72px; } }

.modulo { margin-top: 56px; display: grid; gap: 24px; }
.modulo-media { position: relative; aspect-ratio: 350 / 260; overflow: hidden; background: var(--arena); }
.modulo-media img { width: 100%; height: 100%; object-fit: cover; }
.modulo-texto { display: grid; gap: 16px; align-content: center; justify-items: start; }
.modulo-t { font-weight: 900; font-size: 36px; line-height: 1.06; }
.modulo-p { font-size: 17px; line-height: 1.25; }
.modulo-cab { margin-bottom: 24px; }
@media (min-width: 768px) {
  .modulo { grid-template-columns: minmax(0, 650fr) minmax(0, 624fr); column-gap: clamp(32px, 4vw, 54px); margin-top: 72px; }
  .modulo-media { aspect-ratio: 650 / 360; }
  .modulo-media.corta { aspect-ratio: 650 / 300; }
  .modulo-t { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.04; }
  .modulo-p { font-size: 20px; }
  .modulo-cab { margin-bottom: 32px; }
}

/* Rótulo sobre foto (Imagen ilustrativa / foto de contexto) */
.rotulo { position: absolute; left: 10px; bottom: 10px; height: 22px; padding: 0 9px; background: var(--crema); color: var(--tinta); font-size: 11px; line-height: 22px; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }

/* ---------- Buscador y filtros ---------- */
.busqueda { position: relative; display: flex; align-items: center; height: 52px; border: 1px solid var(--tinta); background: transparent; }
.busqueda .ico { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; pointer-events: none; fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-linecap: round; }
.busqueda input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--tinta); font: inherit; font-size: 14px; padding: 0 44px 0 50px; outline: none; }
.busqueda input::placeholder { color: var(--texto-2); opacity: 1; }
.busqueda input::-webkit-search-cancel-button { appearance: none; }
.busqueda:focus-within { outline: 2px solid var(--foco); outline-offset: 3px; }
.busqueda .borrar { position: absolute; right: 2px; top: 2px; width: 44px; height: 46px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.busqueda .borrar svg { width: 14px; height: 14px; fill: none; stroke: var(--tinta); stroke-width: 1.5; }
@media (min-width: 768px) { .busqueda input { font-size: 16px; } }

/* Sugerencias (ST06) */
.sugerencias { position: absolute; left: -1px; right: -1px; top: 100%; z-index: 20; background: var(--papel); border: 1px solid var(--tinta); border-top: 0; }
.sugerencias button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 12px 16px; cursor: pointer; font-size: 15px; border-bottom: 1px solid var(--linea); }
.sugerencias button:last-child { border-bottom: 0; }
.sugerencias button:hover, .sugerencias button:focus-visible { background: var(--crema); outline-offset: -3px; }
.sugerencias .tipo { color: var(--texto-2); font-size: 12px; margin-left: 8px; }

.banda { display: grid; gap: 12px 12px; margin-top: 32px; }
.banda .busqueda { grid-column: 1 / -1; }
.filtro-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--linea); background: transparent; color: var(--tinta); font-size: 14px; line-height: 1.25; cursor: pointer; text-align: left; min-width: 0; }
.filtro-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro-btn svg { width: 10px; height: 7px; flex: none; fill: none; stroke: var(--tinta); stroke-width: 1.5; }
.filtro-btn.is-active { border-color: var(--ladrillo); box-shadow: inset 0 0 0 1px var(--ladrillo); }
.filtro-btn[aria-expanded="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.banda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .banda { row-gap: 10px; } .banda .busqueda { margin-bottom: 2px; } }
@media (min-width: 768px) {
  .banda { grid-template-columns: minmax(200px, 552fr) repeat(4, minmax(0, 182fr)); gap: 12px; }
  .banda .busqueda { grid-column: auto; }
  .filtro-btn { height: 52px; padding: 0 16px; border-color: var(--tinta); font-size: 15px; }
}
.filtro-wrap { position: relative; min-width: 0; }
.filtro-wrap .filtro-btn { width: 100%; }
.popover { position: absolute; left: 0; top: calc(100% + 8px); z-index: 25; min-width: min(420px, 90vw); background: var(--papel); border: 1px solid var(--tinta); padding: 20px; }
.popover .grupo-t { margin-top: 0; }
.popover .chips { margin-top: 12px; }
.popover .rango { margin-top: 12px; }
.filtro-wrap:nth-child(n+4) .popover { left: auto; right: 0; }

.chips-fecha { margin-top: 24px; }
.resultados-cab { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.resultados-n { font-size: 14px; color: var(--texto-2); }
.resultados-n.is-filtrado { font-weight: 900; font-size: 23px; line-height: 1.2; color: var(--tinta); }
@media (min-width: 768px) { .resultados-n.is-filtrado { font-size: 28px; } }
.chips-activos .chip { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.chips-activos .chip:hover { background: #3d2e28; }
.agenda .tarjetas { margin-top: 24px; }
@media (min-width: 768px) { .agenda .tarjetas { margin-top: 32px; } }
.paginar { margin-top: 40px; display: grid; gap: 12px; justify-items: start; }
.paginar .btn { min-width: 230px; }
.paginar .fin { font-size: 14px; color: var(--texto-2); }
@media (max-width: 767px) { .paginar .btn { width: 100%; } }

/* Rango de fechas */
.rango { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rango label { display: grid; gap: 6px; font-size: 13px; font-weight: 900; }
.rango input { height: 44px; border: 1px solid var(--linea); background: var(--papel); font: inherit; font-size: 14px; padding: 0 10px; color: var(--tinta); min-width: 0; }

/* ---------- Tarjetas ---------- */
.tarjetas { display: grid; gap: 40px 24px; }
@media (min-width: 768px) { .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; } }
@media (min-width: 1120px) { .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tarjeta { display: flex; flex-direction: column; min-width: 0; }
.tarjeta-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--papel); }
.tarjeta-media img { width: 100%; height: 100%; object-fit: cover; }
.sin-foto { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--linea); background: var(--papel); color: var(--texto-2); font-size: 14px; text-align: center; padding: 16px; }
.sin-foto b { font-weight: 900; font-size: 22px; line-height: 1.1; color: var(--ladrillo); text-transform: uppercase; letter-spacing: .02em; }
.fav { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: var(--crema); color: var(--tinta); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.fav[aria-pressed="true"] svg { fill: currentColor; }
.fav:hover { background: var(--papel); }
.tarjeta-cat { margin-top: 14px; font-size: 11px; line-height: 1.25; letter-spacing: .02em; text-transform: uppercase; color: var(--oliva); display: flex; gap: 8px; flex-wrap: wrap; }
.tarjeta-cat .etq { color: var(--ladrillo); }
.tarjeta-t { margin-top: 10px; font-weight: 900; font-size: 25px; line-height: 1.2; }
.tarjeta-t a { text-decoration: none; }
.tarjeta-t a:hover { text-decoration: underline; }
.tarjeta-meta { margin-top: 8px; font-size: 14px; line-height: 1.3; color: var(--texto-2); }
.tarjeta-ver { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--ladrillo); text-decoration: none; }
.tarjeta-ver svg { width: 18px; height: 12px; flex: none; }
.tarjeta-ver:hover span { text-decoration: underline; }
.tarjeta.is-terminado .tarjeta-media img { filter: grayscale(.4); }
@media (min-width: 768px) {
  .tarjeta-t { font-size: 28px; line-height: 1.07; }
  .tarjeta-meta { font-size: 15px; }
}
.esqueleto .tarjeta-media, .esqueleto .lin { background: var(--arena); }
.esqueleto .lin { height: 13px; margin-top: 14px; width: 80%; }
.esqueleto .lin + .lin { width: 55%; }
.esqueleto-t { margin-top: 24px; font-weight: 900; font-size: 23px; }

/* ---------- Estados (paneles) ---------- */
.panel-estado { background: var(--papel); border: 1px solid var(--linea); padding: 22px; display: grid; gap: 12px; justify-items: start; }
.panel-estado .pe-t { font-weight: 900; font-size: 23px; line-height: 1.17; }
.panel-estado .pe-p { font-size: 15px; line-height: 1.47; max-width: 60ch; }
.panel-estado .pe-acciones { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 8px; }
.panel-estado .pe-acciones .btn { min-width: 220px; }
.panel-estado .pe-sec { font-size: 12px; color: var(--ladrillo); }
.panel-estado.pe-error { border-color: var(--ladrillo); }
@media (min-width: 768px) {
  .panel-estado { padding: 28px; }
  .panel-estado .pe-t { font-size: 28px; line-height: 1.14; }
  .panel-estado .pe-p { font-size: 17px; }
  .panel-estado .pe-acciones .btn { min-width: 300px; }
}
.agenda .panel-estado { margin-top: 32px; }

/* ---------- Ficha de evento (S03) ---------- */
.evento-cab .eyebrow a { color: inherit; text-decoration: none; }
.evento-cab .eyebrow a:hover { text-decoration: underline; }
.evento-cab { display: grid; gap: 12px; }
.evento-volver { font-size: 14px; }
.evento-grid { display: grid; gap: 32px; margin-top: 32px; }
.evento-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--papel); }
.evento-media img, .evento-media picture { width: 100%; height: 100%; }
.evento-media img { object-fit: cover; }
.evento-media .sin-foto { font-size: 15px; }
.evento-media .fav { display: none; }
.datos { display: grid; }
.datos div { padding: 12px 0 10px; border-bottom: 1px solid var(--linea); }
.datos div:first-child { padding-top: 0; }
.datos dt { font-size: 11px; line-height: 1.25; letter-spacing: .02em; text-transform: uppercase; color: var(--oliva); }
.datos dd { margin: 10px 0 0; font-weight: 900; font-size: 20px; line-height: 1.2; }
.evento-acciones { display: grid; gap: 12px; margin-top: 8px; }
.evento-acciones .btn { width: 100%; }
.evento-ayuda { font-size: 13px; line-height: 1.4; color: var(--texto-2); margin-top: 14px; }
.evento-ayuda button { margin-left: 2px; }
.evento-local-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.evento-aviso { margin-bottom: 20px; display: grid; gap: 12px; }
.evento-aviso .panel-estado { padding: 16px 18px; gap: 6px; }
.evento-aviso .pe-t { font-size: 18px; }
.evento-aviso .pe-p { font-size: 14px; }
.evento-cuerpo { margin-top: 48px; display: grid; gap: 40px; }
.evento-sec h2 { font-weight: 900; font-size: 28px; line-height: 1.14; }
.evento-sec .lead { margin-top: 16px; font-size: 18px; line-height: 1.56; max-width: 64ch; }
.evento-sec .nota { margin-top: 20px; font-size: 14px; line-height: 1.3; color: var(--texto-2); max-width: 70ch; }
.evento-sec .texto { margin-top: 16px; font-size: 16px; line-height: 1.25; max-width: 70ch; }
.evento-rel { margin-top: 56px; }
.evento-rel .tarjetas { margin-top: 24px; }
@media (min-width: 768px) {
  .evento-grid { grid-template-columns: minmax(0, 860fr) minmax(300px, 420fr); column-gap: clamp(28px, 3.4vw, 48px); margin-top: 32px; }
  .evento-media { aspect-ratio: 860 / 440; }
  .datos dd { font-size: 24px; }
  .evento-cuerpo { margin-top: 56px; }
  .evento-sec h2 { font-size: 38px; line-height: 1.25; }
  .evento-sec .lead { font-size: 24px; line-height: 1.42; margin-top: 20px; }
  .evento-sec .nota, .evento-sec .texto { font-size: 16px; }
  .evento-rel { margin-top: 72px; }
  .evento-rel .tarjetas { margin-top: 32px; }
}

/* ---------- Favoritos (S04) ---------- */
.fav-tabs { margin-top: 24px; }
.favoritos .tarjetas { margin-top: 32px; }
.favoritos .panel-estado { margin-top: 32px; }
.favoritos .seguir { margin-top: 40px; }
@media (max-width: 767px) { .favoritos .seguir .btn { width: 100%; } }

/* ---------- Formulario (S11) ---------- */
.form-grid { display: grid; gap: 40px; margin-top: 32px; }
.form { display: grid; gap: 20px; max-width: 760px; }
.f { display: grid; gap: 8px; }
.f > label, .f > span, .f-label { font-weight: 900; font-size: 13px; line-height: 1.25; }
.f input, .f select, .f textarea { width: 100%; min-height: 52px; border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); font: inherit; font-size: 15px; line-height: 1.25; padding: 0 14px; border-radius: 0; }
.f textarea { min-height: 110px; padding: 16px 14px; resize: vertical; }
.f select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M0 .5 5 6.5 10 .5' fill='none' stroke='%232B201B' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.f input::placeholder, .f textarea::placeholder { color: var(--texto-2); opacity: 1; }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.f.is-error input, .f.is-error select, .f.is-error textarea { border-color: var(--ladrillo); box-shadow: inset 0 0 0 1px var(--ladrillo); }
.f-error { font-size: 12px; line-height: 1.25; color: var(--ladrillo); }
.f-ayuda { font-size: 13px; color: var(--texto-2); line-height: 1.3; }
.f-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-fila-3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.f-fila-3 .chip { height: 52px; }
.f-check { display: flex; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; }
.f-check input { width: 20px; height: 20px; min-height: 0; margin: 0; appearance: none; border: 1px solid var(--tinta); background: transparent; padding: 0; display: grid; place-content: center; cursor: pointer; }
.f-check input:checked::before { content: ""; width: 10px; height: 10px; background: var(--tinta); }
.f-nota { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.f-nota::before { content: ""; width: 20px; height: 20px; border: 1px solid var(--tinta); flex: none; }
.form-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.form-acciones .btn-primario { min-width: 280px; }
@media (max-width: 767px) { .form-acciones .btn { width: 100%; } .f-fila-3 { grid-template-columns: 1fr 1fr; } .f-fila-3 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 440px) { .f-fila-3 { grid-template-columns: 1fr; } }
.f-fila-3 > label { min-width: 0; } .f-fila-3 input { min-width: 0; }
.form-lado { background: var(--papel); padding: 28px; display: grid; gap: 20px; align-content: start; }
.form-lado .modulo-t { font-size: 36px; }
.form-lado p { font-size: 17px; line-height: 1.5; }
@media (min-width: 1120px) {
  .form-grid { grid-template-columns: minmax(0, 760px) minmax(300px, 464px); justify-content: space-between; column-gap: 48px; }
  .form-lado { padding: 36px 28px; }
  .form-lado .modulo-t { font-size: 44px; }
  .form-lado p { font-size: 18px; line-height: 1.56; }
}
.form-resumen { margin-bottom: 24px; }
.form-resumen ul { display: grid; gap: 6px; font-size: 15px; }
.form-resumen a { color: var(--ladrillo); }

/* ---------- Paneles completos: menú (O01) y filtros (O02) ---------- */
dialog { border: 0; padding: 0; background: var(--crema); color: var(--tinta); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(43, 32, 27, .35); }
.panel { width: 100vw; height: 100dvh; margin: 0; overflow: auto; }
.panel-in { width: min(100% - 2 * var(--m), var(--ancho)); margin-inline: auto; min-height: 100%; display: flex; flex-direction: column; }
.panel-cab { height: var(--cab); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--linea); flex: none; }
.panel-cab img { width: 140px; height: auto; }
@media (min-width: 768px) { .panel-cab img { width: 174px; } }
.panel-cab .cerrar { border-color: transparent; }
.panel-cab .cerrar svg { width: 18px; height: 18px; stroke-width: 1.5; }
.panel-cuerpo { flex: 1 0 auto; padding: 32px 0 40px; }
.panel-t { font-weight: 900; font-size: 40px; line-height: 1.07; }
@media (min-width: 768px) { .panel-t { font-size: 72px; line-height: 1.05; } }

/* Menú */
.menu-lista { margin-top: 32px; border-top: 1px solid var(--linea); }
.menu-lista a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); font-weight: 900; font-size: 32px; line-height: 1.25; text-decoration: none; color: var(--tinta); }
.menu-lista a[aria-current="page"] { color: var(--ladrillo); }
.menu-lista a svg { width: 22px; height: 14px; flex: none; color: var(--ladrillo); }
.menu-lista a:hover { color: var(--ladrillo); }
.menu-acciones { margin-top: 32px; display: grid; gap: 24px; }
.menu-sec { font-size: 14px; color: var(--ladrillo); display: flex; gap: 12px; flex-wrap: wrap; }
.menu-sec a { text-decoration: none; }
.menu-sec a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .menu-lista { margin-top: 40px; }
  .menu-lista a { font-size: 48px; padding: 20px 0; }
  .menu-acciones .btn { width: 280px; }
}

/* Filtros (hoja móvil) */
.grupo { padding: 24px 0; border-bottom: 1px solid var(--linea); }
.grupo:first-child { padding-top: 32px; }
.grupo-t { font-weight: 900; font-size: 24px; line-height: 1.2; }
.grupo .chips { margin-top: 16px; }
.grupo .rango { margin-top: 16px; }
.hoja-acciones { display: grid; gap: 16px; padding-top: 24px; }
.hoja-resumen { margin-top: 8px; font-size: 14px; color: var(--ladrillo); }
@media (min-width: 768px) { .grupo-t { font-size: 30px; } }

/* Diálogo de confirmación (ST21) */
.dialogo { width: min(100% - 40px, 560px); border: 1px solid var(--tinta); background: var(--papel); padding: 28px; }
.dialogo .pe-t { font-weight: 900; font-size: 28px; line-height: 1.14; }
.dialogo .pe-p { margin-top: 12px; font-size: 17px; }
.dialogo .pe-acciones { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: var(--m); right: var(--m); bottom: 20px; z-index: 60; background: var(--papel); color: var(--tinta); border: 1px solid var(--tinta); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; line-height: 1.3; }
.toast small { display: block; color: var(--texto-2); font-size: 13px; }
.toast .btn { min-height: 40px; padding: 0 16px; }
@media (min-width: 768px) { .toast { left: auto; right: var(--m); width: min(420px, calc(100% - 2 * var(--m))); bottom: 28px; } }

/* ---------- Créditos (O03) ---------- */
.creditos-intro { margin-top: 20px; font-size: 18px; line-height: 1.4; max-width: 60ch; }
.creditos-lista { margin-top: 40px; display: grid; gap: 40px; }
.credito { display: grid; gap: 16px; }
.credito img { width: 100%; max-width: 240px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--arena); }
.credito-t { font-weight: 900; font-size: 24px; line-height: 1.2; }
.credito-pl { font-size: 16px; margin-top: 4px; }
.credito-ctx { font-size: 14px; color: var(--texto-2); margin-top: 8px; }
.credito-link { display: inline-block; margin-top: 12px; font-size: 15px; color: var(--ladrillo); }
@media (min-width: 768px) {
  .creditos-intro { font-size: 24px; }
  .credito { grid-template-columns: 240px 1fr; column-gap: 20px; }
  .credito-t { font-size: 32px; }
  .credito-pl { font-size: 18px; }
  .credito-ctx { font-size: 15px; }
}
.creditos-nota { margin-top: 40px; font-size: 14px; color: var(--texto-2); max-width: 90ch; }
.creditos-fuentes { margin-top: 24px; font-size: 14px; display: grid; gap: 6px; }

/* ---------- Sección pendiente (diseñada en v03, no implementada aún) ---------- */
.pendiente .panel-estado { margin-top: 32px; }
.pendiente .lamina { font-size: 13px; color: var(--texto-2); }

/* ---------- Impresión ---------- */
@media print { .top, .pie, .toast, dialog { display: none !important; } }

/* ---------- Guía (S05) y Lugar (S06) ---------- */
.guia .busqueda { margin-top: 0; }
.chips-guia, .chips-rutas { margin-top: 20px; }
.destacado { margin-top: 40px; display: grid; gap: 24px; }
.destacado-media { position: relative; aspect-ratio: 350 / 260; overflow: hidden; background: var(--arena); }
.destacado-media img { width: 100%; height: 100%; object-fit: cover; }
.destacado-texto { display: grid; gap: 12px; justify-items: start; }
.destacado-t { font-weight: 900; font-size: 36px; line-height: 1.06; }
.destacado-p { font-size: 18px; line-height: 1.3; }
.bloque { margin-top: 56px; }
.bloque-nota { margin-top: 12px; font-size: 14px; color: var(--texto-2); max-width: 70ch; }
.bloque .tarjetas { margin-top: 24px; }
@media (min-width: 768px) {
  .destacado { margin-top: 48px; }
  .destacado-media { aspect-ratio: 1328 / 460; }
  .destacado-t { font-size: clamp(38px, 4vw, 58px); line-height: 1.04; }
  .destacado-p { font-size: 22px; }
  .bloque { margin-top: 72px; }
  .bloque .tarjetas { margin-top: 32px; }
}
.lugar-media { aspect-ratio: 350 / 260; }
@media (min-width: 768px) { .lugar-media { aspect-ratio: 1328 / 480; } }
.lugar-acciones { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.lugar-t2 { margin-top: 40px; font-weight: 900; font-size: 32px; line-height: 1.1; }
.lugar-p { margin-top: 16px; font-size: 18px; line-height: 1.4; max-width: 70ch; }
.lugar-datos { margin-top: 32px; }
.lugar-datos div { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--linea); }
.lugar-datos div:last-child { border-bottom: 1px solid var(--linea); }
.lugar-datos dt { font-weight: 900; font-size: 16px; }
.lugar-datos dd { margin: 0; font-size: 15px; color: var(--texto-2); }
.lugar-credito { margin-top: 24px; font-size: 12px; color: var(--texto-2); }
@media (min-width: 768px) {
  .lugar-t2 { font-size: 48px; }
  .lugar-p { font-size: 22px; line-height: 1.25; }
  .lugar-datos div { grid-template-columns: minmax(0, 474px) 1fr; align-items: baseline; padding: 20px 0; }
}

/* ---------- Rutas (S07) y Ruta (S08) ---------- */
.rutas-lista { margin-top: 40px; display: grid; gap: 40px; }
.ruta-item { display: grid; gap: 20px; }
.ruta-media { position: relative; aspect-ratio: 426 / 260; overflow: hidden; background: var(--arena); }
.ruta-media img { width: 100%; height: 100%; object-fit: cover; }
.ruta-texto { display: grid; gap: 12px; justify-items: start; align-content: start; }
.ruta-t { font-weight: 900; font-size: 32px; line-height: 1.06; }
.ruta-p { font-size: 18px; line-height: 1.3; }
@media (min-width: 768px) {
  .rutas-lista { margin-top: 48px; gap: 58px; }
  .ruta-item { grid-template-columns: minmax(0, 426px) 1fr; column-gap: 48px; }
  .ruta-t { font-size: 42px; }
  .ruta-p { font-size: 20px; }
}
.esquema { margin-top: 32px; background: var(--papel); border: 1px solid var(--linea); padding: 18px; }
.esquema svg { width: 100%; height: auto; display: block; margin-top: 12px; }
.esquema-pie { margin-top: 10px; font-size: 12px; color: var(--texto-2); }
.paradas { margin-top: 40px; display: grid; gap: 32px; counter-reset: parada; }
.parada { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; }
.parada .num { width: 36px; height: 36px; background: var(--ladrillo); color: var(--crema); font-weight: 900; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.parada h3 { font-weight: 900; font-size: 26px; line-height: 1.1; }
.parada p { margin-top: 8px; font-size: 17px; line-height: 1.3; }
.parada .meta { margin-top: 8px; font-size: 13px; color: var(--texto-2); }
@media (min-width: 768px) { .parada { grid-template-columns: 36px 1fr; column-gap: 22px; } .parada h3 { font-size: 34px; } .parada p { font-size: 19px; } }

/* ---------- Historias (S09) y Artículo (S10) ---------- */
.hist-hero { margin-top: 0; position: relative; aspect-ratio: 350 / 260; overflow: hidden; background: var(--arena); }
.hist-hero img { width: 100%; height: 100%; object-fit: cover; }
.hist-destacada { margin-top: 32px; display: grid; gap: 16px; justify-items: start; }
.hist-destacada .h-t { font-weight: 900; font-size: clamp(36px, 5vw, 72px); line-height: 1.04; }
.hist-destacada .h-p { font-size: 18px; line-height: 1.3; }
.historias-lista { margin-top: 24px; display: grid; gap: 40px; }
.hist-card { display: grid; gap: 14px; }
.hist-card .hist-media { position: relative; aspect-ratio: 652 / 330; overflow: hidden; background: var(--arena); }
.hist-card img { width: 100%; height: 100%; object-fit: cover; }
.hist-card h3 { font-weight: 900; font-size: 28px; line-height: 1.2; }
.hist-card h3 a { text-decoration: none; }
.hist-card h3 a:hover { text-decoration: underline; }
.hist-card .leer { font-size: 14px; color: var(--ladrillo); text-decoration: none; }
@media (min-width: 768px) {
  .hist-hero { aspect-ratio: 1328 / 480; }
  .hist-destacada { margin-top: 40px; }
  .hist-destacada .h-p { font-size: 24px; }
  .historias-lista { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
  .hist-card h3 { font-size: 38px; line-height: 1.25; }
}
.articulo-dek { margin-top: 20px; font-size: 20px; line-height: 1.35; max-width: 60ch; }
.articulo-firma { margin-top: 16px; }
.articulo-media { margin-top: 32px; position: relative; aspect-ratio: 350 / 260; overflow: hidden; background: var(--arena); }
.articulo-media img { width: 100%; height: 100%; object-fit: cover; }
.articulo-pie { margin-top: 12px; font-size: 11px; color: var(--texto-2); }
.articulo-cuerpo { margin-top: 40px; display: grid; gap: 28px; max-width: 64ch; }
.articulo-cuerpo p { font-size: 19px; line-height: 1.53; }
.articulo-cita { margin-top: 56px; font-weight: 900; font-size: 36px; line-height: 1.07; color: var(--ladrillo); max-width: 24ch; }
.articulo-fin { margin-top: 32px; }
@media (min-width: 768px) {
  .articulo-dek { font-size: 30px; }
  .articulo-media { aspect-ratio: 1328 / 490; }
  .articulo-cuerpo { margin-left: clamp(0px, 16vw, 228px); margin-top: 48px; }
  .articulo-cuerpo p { font-size: 24px; line-height: 1.54; }
  .articulo-cita { margin-left: clamp(0px, 16vw, 228px); font-size: 56px; margin-top: 80px; }
  .articulo-fin { margin-left: clamp(0px, 16vw, 228px); }
}

/* ---------- Acerca (S12) ---------- */
.slogan-acerca { margin-top: 24px; font-size: clamp(47px, 8.3vw, 120px); line-height: 1; }
.acerca-media { margin-top: 32px; aspect-ratio: 350 / 260; }
.acerca-t2 { margin-top: 56px; font-weight: 900; font-size: clamp(36px, 4.9vw, 70px); line-height: 1.06; }
.acerca-p { margin-top: 24px; font-size: 19px; line-height: 1.45; max-width: 74ch; }
.principios { margin-top: 48px; display: grid; gap: 40px; }
.principios h3 { font-weight: 900; font-size: 34px; line-height: 1.1; margin-top: 12px; }
.principios p + p, .principios h3 + p { margin-top: 12px; font-size: 19px; line-height: 1.3; }
.acerca .btn { margin-top: 48px; }
@media (min-width: 768px) {
  .acerca-media { aspect-ratio: 1328 / 430; }
  .acerca-p { font-size: 25px; }
  .principios h3 { font-size: 46px; }
  .principios h3 + p { font-size: 22px; }
}

/* ---------- Colaborar (S13) ---------- */
#colab-motivos { margin-bottom: 32px; }
.colab-lado { display: grid; gap: 24px; align-content: start; }
.colab-foto { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--arena); max-width: 464px; }
.colab-foto img { width: 100%; height: 100%; object-fit: cover; }
.colab-lado .modulo-t { font-size: 36px; }
@media (min-width: 1120px) { .colab-lado .modulo-t { font-size: 44px; } }

/* Artículo: aviso de borrador y lista de verificación */
.articulo-aviso { max-width: 64ch; margin-top: 32px; }
.articulo-verificar { max-width: 64ch; margin-top: 32px; border: 1px solid var(--linea); padding: 16px 20px; }
@media (min-width: 1120px) { .articulo-aviso, .articulo-verificar { margin-left: clamp(0px, 16vw, 228px); } }
.articulo-verificar summary { font-weight: 900; cursor: pointer; }
.articulo-verificar summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.articulo-verificar ul { margin: 12px 0 0; padding-left: 20px; color: var(--texto-2); }
.articulo-verificar li + li { margin-top: 6px; }

/* Mapa interactivo (vectorial propio) */
.mapa { margin-top: 32px; border: 1px solid var(--linea); background: var(--papel); }
.mapa-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.mapa-cab .eyebrow { margin: 0; }
.mapa-ctl { display: flex; gap: 8px; }
.mapa-btn { min-width: 44px; height: 44px; border: 1px solid var(--tinta); background: var(--crema); color: var(--tinta); font: 900 20px/1 'Roboto CSC', Roboto, sans-serif; cursor: pointer; padding: 0 12px; }
.mapa-btn-txt { font-size: 14px; }
.mapa-btn:hover { background: var(--tinta); color: var(--crema); }
.mapa-btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.mapa-lienzo { position: relative; }
.mapa svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 620; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mapa svg:active { cursor: grabbing; }
.mapa-mar { fill: #DCCFB6; }
.mapa-land { fill: var(--crema); stroke: #B4A78E; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mapa-agua { fill: #DCCFB6; }
.mapa-via { fill: none; stroke: #C9B99C; stroke-width: 1.5px; }
.mapa-muralla { fill: none; stroke: var(--tinta); stroke-width: 1.5px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.mapa-rot { font-family: 'Roboto CSC', Roboto, sans-serif; fill: var(--texto-2); pointer-events: none; }
.mapa-rot-barrio { font-weight: 900; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.mapa-rot-sub { font-size: 12px; }
.mapa-rot-hito { font-size: 12px; font-weight: 900; fill: var(--tinta); }
.mapa-rot-agua { font-size: 12px; font-style: italic; fill: #8E8168; }
.mapa-linea { fill: none; stroke: var(--ladrillo); stroke-width: 2.5px; stroke-dasharray: 7 6; }
.mapa-pin { cursor: pointer; }
.mapa-pin circle { fill: var(--ladrillo); stroke: var(--crema); stroke-width: 2.5; }
.mapa-pin text { font-family: 'Roboto CSC', Roboto, sans-serif; font-weight: 900; font-size: 15px; fill: var(--crema); pointer-events: none; }
.mapa-pin:hover circle, .mapa-pin.es-activo circle { fill: var(--tinta); }
.mapa-pin:focus { outline: none; }
.mapa-pin:focus-visible circle { stroke: var(--tinta); stroke-width: 4; }
.mapa-ayuda { position: absolute; right: 10px; bottom: 8px; margin: 0; font-size: 11px; color: var(--texto-2); background: rgba(247, 242, 232, .85); padding: 3px 8px; }
.mapa-pie { margin: 0; padding: 12px 18px; font-size: 12px; color: var(--texto-2); border-top: 1px solid var(--linea); }
.ruta-meta { margin-top: 12px; font-size: 14px; color: var(--texto-2); }
.rutas-mapa { margin-top: 24px; }
.rutas-mapa[hidden] { display: none; }
.parada .num { border: 0; cursor: pointer; font-family: inherit; }
.parada .num:hover { background: var(--tinta); }
.parada .num:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.parada.es-activa h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--ladrillo); }
.parada .meta a { color: var(--ladrillo); }
@media (max-width: 599px) { .mapa svg { aspect-ratio: 1000 / 900; } }
@media (max-width: 767px) { .mapa-cab { padding: 12px 14px; } .mapa-ayuda { display: none; } }

/* Fuentes de lugares, rutas e historias */
.fuentes { max-width: 64ch; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linea); }
.fuentes ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--texto-2); }
.fuentes li { margin: 6px 0; }
.fuentes a, .lugar-datos a, .parada .meta a, .evento-sec .nota a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 1120px) { .articulo-fuentes { margin-left: clamp(0px, 16vw, 228px); } }
.articulo-pie a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Casa Salvaje: primero en la portada */
.casa-banda { display: grid; gap: 0; margin: 32px 0 40px; background: #1d1411; color: #F1E5CF; }
.casa-media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.casa-media img, .casa-media picture { width: 100%; height: 100%; display: block; }
.casa-media img { object-fit: cover; }
.casa-texto { padding: 28px 20px 32px; display: flex; flex-direction: column; justify-content: center; }
.casa-texto .eyebrow { color: #e3b98f; }
.casa-t { font-weight: 900; font-size: clamp(40px, 6vw, 72px); line-height: .95; margin: 8px 0 4px; letter-spacing: -.01em; }
.casa-lema { font-style: italic; margin: 0 0 16px; color: #e3b98f; }
.casa-p { font-size: 17px; line-height: 1.5; margin: 0 0 10px; max-width: 46ch; }
.casa-dir { font-size: 14px; opacity: .8; margin: 0 0 20px; }
.casa-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.casa-banda .btn { min-height: 44px; }
.casa-banda .btn-primario { background: #F1E5CF; color: #1d1411; border-color: #F1E5CF; }
.casa-banda .btn-secundario { color: #F1E5CF; border-color: rgba(241,229,207,.6); background: transparent; }
.casa-banda .btn:focus-visible, .casa-mas a:focus-visible { outline: 2px solid #F1E5CF; outline-offset: 3px; }
.casa-mas { margin: 16px 0 0; font-size: 14px; }
.casa-mas a { color: #F1E5CF; }
.etq-casa { color: var(--ladrillo); font-weight: 900; }
@media (max-width: 767px) { .casa-acciones .btn { width: 100%; justify-content: center; } }
@media (min-width: 768px) {
  .casa-banda { grid-template-columns: 1.15fr 1fr; }
  .casa-media { aspect-ratio: auto; min-height: 460px; }
  .casa-texto { padding: 40px 44px; }
}