/* ============================================================================
   BIOMELISA · COMPONENTS.CSS · Capa base de componentes primitivos
   Clases canónicas de referencia (Manual B-7). Se cargan tras variables.css.
   Regla: nunca valores hardcodeados salvo derivados documentados; usar var(--token).
   La implementación "viva" de botones vive también en los ajustes globales de Kadence;
   estas clases son la referencia documentada para usos manuales.
   ============================================================================ */

/* ── ACCESIBILIDAD GLOBAL · Skip link (D-135) ─────────────────────────────────
   Enlace "Saltar al contenido" visible al recibir foco. */
.skip-link, a.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--color-coral-dark); color: #FFFFFF;
  padding: 12px 20px; border-radius: 0 0 6px 0;
  font-family: var(--font-body); font-size: 14px; text-decoration: none;
}
.skip-link:focus, a.skip-link:focus {
  left: 0; outline: 2px solid var(--color-coral); outline-offset: 2px;
}

/* ── BTN-01 · Botón primario (Manual B-7 · D-063/D-064) ───────────────────────
   Contraste: reposo #C0635A + texto blanco = 4.6:1 (AA), según D-134.
   Resuelve la contradicción con B-7/Design Tokens (#EF8477+blanco, falla AA)
   a favor de la accesibilidad (Opción A, aprobada 2026-07-05). */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-coral-dark);   /* #C0635A */
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 14px 28px;
  border: none;
  border-radius: var(--btn-radius);      /* 6px */
  min-height: var(--btn-min-touch);      /* 44px área táctil */
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-fast);
}
.btn-primary:hover {
  background: #A34A43;                    /* coral más oscuro (derivado) */
  color: #FFFFFF;
}
.btn-primary:focus-visible {
  outline: 2px solid var(--color-coral); /* #EF8477 */
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-ring);
}
.btn-primary:active {
  transform: scale(0.98);
}
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── BTN-02 · Botón secundario / contorno (Manual B-7 · D-063) ────────────────
   Accesible (Opción aprobada 2026-07-05): borde #C0635A + texto #A34A43 = 5.1:1 (AA).
   La ficha usaba coral #EF8477 (falla AA sobre crema). Familia con BTN-01. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #A34A43;                        /* coral profundo · AA sobre crema */
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  padding: 12px 24px;
  border: 1.5px solid var(--color-coral-dark);   /* #C0635A */
  border-radius: var(--btn-radius);      /* 6px */
  min-height: var(--btn-min-touch);      /* 44px */
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-fast);
}
.btn-secondary:hover {
  background: var(--color-fondo-coral);  /* #FDF5F4 */
  color: #A34A43;
}
.btn-secondary:focus-visible {
  outline: 2px solid var(--color-coral); /* #EF8477 */
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-ring);
}
.btn-secondary:active {
  transform: scale(0.98);
}
.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── BTN-03 · Botón fantasma / enlace con flecha (Manual B-7 · D-063) ─────────
   Enlace de lectura/exploración, no de conversión. Flecha → vía ::after.
   Accesible (aprobado 2026-07-05): texto #A34A43 = 5.1:1 (AA), 14px. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  color: #A34A43;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
}
.btn-ghost::after { content: " \2192"; }   /* → */
.btn-ghost:hover { text-decoration: underline; }
.btn-ghost:focus-visible {
  outline: 2px solid var(--color-coral);    /* #EF8477 */
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}
.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ✅ Familia de botones cerrada: BTN-01 · BTN-02 · BTN-03 (color de acento común #A34A43, todos AA). */

/* ── ENLACES GLOBALES DE CONTENIDO (Design Tokens Sec.8 · WCAG 1.4.1) ─────────
   Solo enlaces dentro del contenido (.entry-content). NO afecta a header, footer,
   menús ni botones. Subrayado permanente (requisito de accesibilidad: ningún coral
   cumple a la vez 4.5:1 sobre crema y 3:1 vs texto marrón). Aprobado 2026-07-05.
   Matiz: subrayado fino, separado y suave en reposo → editorial; pleno en hover. */
.entry-content a:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.wp-block-button__link):not(.kb-button):not(.button) {
  color: #A34A43;                                 /* 5.1:1 sobre crema · AA */
  text-decoration: underline;
  text-decoration-thickness: 1px;                 /* fino / discreto */
  text-underline-offset: 3px;                     /* separación del texto */
  text-decoration-color: rgba(163, 74, 67, 0.45); /* subrayado más suave que la letra */
  transition: color var(--transition-base), text-decoration-color var(--transition-base);
}
.entry-content a:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.wp-block-button__link):not(.kb-button):not(.button):hover {
  color: #8F3F39;
  text-decoration-color: #8F3F39;                 /* subrayado a color pleno en hover */
}
.entry-content a:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.wp-block-button__link):not(.kb-button):not(.button):focus-visible {
  outline: 2px solid var(--color-coral);          /* #EF8477 */
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── FORM-01 · Sistema base de formularios (Manual B-7 · Design Tokens Sec.8) ──
   Scope: .bm-form (utilidad) + .wpforms-form (plugin). No toca el buscador del header.
   Accesible: borde taupe #8A7968 (WCAG 1.4.11 ~4.4:1) · foco coral · error texto
   #A34A43 + borde #C0635A. Separación vertical generosa (calma). Aprobado 2026-07-05. */
.bm-form .bm-field-group,
.wpforms-form .wpforms-field { margin-bottom: 32px; }

.bm-form label,
.wpforms-form .wpforms-field-label {
  display: block; font-family: var(--font-body); font-size: 14px; font-weight: 700;
  color: var(--color-marron-texto); margin-bottom: 8px;
}

.bm-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.bm-form textarea, .bm-form select,
.wpforms-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpforms-form textarea, .wpforms-form select {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--color-marron-texto);
  background: #FFFFFF; border: 1.5px solid #8A7968; border-radius: var(--input-radius);
  padding: var(--input-padding); min-height: var(--input-height); line-height: 1.4;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.bm-form ::placeholder, .wpforms-form ::placeholder { color: #8A7968; opacity: 1; }

.bm-form textarea, .wpforms-form textarea { min-height: 120px; resize: vertical; }

.bm-form input:focus, .bm-form textarea:focus, .bm-form select:focus,
.wpforms-form input:focus, .wpforms-form textarea:focus, .wpforms-form select:focus {
  border-color: var(--color-coral); box-shadow: var(--focus-ring); outline: none;
}

.bm-form .is-error, .wpforms-form input.wpforms-error,
.wpforms-form textarea.wpforms-error, .wpforms-form select.wpforms-error {
  border-color: var(--color-coral-dark);   /* #C0635A */
}
.bm-form .bm-error, .wpforms-form label.wpforms-error {
  display: block; color: #A34A43; font-size: 13px; font-weight: 400; margin-top: 6px;
}

.bm-form .bm-help, .wpforms-form .wpforms-field-description {
  color: var(--color-gris-texto); font-size: 13px; margin-top: 6px;
}

.bm-form input[type="checkbox"], .bm-form input[type="radio"],
.wpforms-form input[type="checkbox"], .wpforms-form input[type="radio"] {
  width: 20px; height: 20px; accent-color: var(--color-coral-dark);   /* #C0635A */
}

.bm-form input:disabled, .bm-form textarea:disabled, .bm-form select:disabled,
.wpforms-form input:disabled, .wpforms-form textarea:disabled, .wpforms-form select:disabled {
  background: var(--color-fondo-gris); color: #8A7968; border-color: #DED6CD; cursor: not-allowed;
}

.bm-form .bm-success, .wpforms-confirmation-container-full {
  font-family: var(--font-editorial); font-style: italic; font-size: 20px; color: var(--color-success); /* #4A7A54 */
}

/* ── EDT-03 · Separadores (Manual B-7) · decorativos → aria-hidden="true" ──────
   CRITERIO DE USO (aprobado 2026-07-05) · NO usar las tres indistintamente:
   .sep-line  → PRINCIPAL / estructural. Uso habitual entre subsecciones. Ante la duda, esta.
   .sep-leaf  → EMOCIONAL / de marca (la "firma"). Recomendado máx. 1 por página/artículo;
                excepción en páginas largas o muy narrativas si aporta valor y no satura.
                Símbolo botánico SVG de marca (placeholder hasta disponer del asset).
   .sep-dots  → EDITORIAL / de lectura. Citas, cambios de tema, transiciones en prosa. */
.sep-line { width: 60px; height: 1px; background: var(--color-verde-agua-dark); border: 0; margin: 48px auto; }
.sep-leaf { display: block; text-align: center; color: var(--color-beige); font-size: 24px; line-height: 1; margin: 48px 0; }
.sep-dots { display: block; text-align: center; color: var(--color-beige); font-family: var(--font-body); font-size: 18px; letter-spacing: .5em; padding-left: .5em; margin: 40px 0; }

/* ── EDT-02 · CAJA DE ACOMPAÑAMIENTO (id interno EDT-02 · Manual B-7) ──────────
   Acompaña (contexto, matiz, dato con calidez), NO alarma. Verde = calma/naturaleza.
   Accesibilidad: role="note" por defecto · role="alert" SOLO en advertencia real.
   Etiqueta accesible en #3A6A44 (4.8:1 sobre verde agua). Cuerpo 16px (aire de lectura).

   CATÁLOGO OFICIAL DE ETIQUETAS (permitidas · aprobado 2026-07-05):
     · Nota Biomelisa   · Mi experiencia   · Consejo práctico
     · ¿Sabías que…?    · Para recordar
   (Ampliable en el futuro. No usar etiquetas fuera de este catálogo sin decisión.)
   Iconos de etiqueta: TEXTO por ahora; iconos SVG de marca cuando existan. */
.edt-note {
  background: var(--color-verde-agua);            /* #D0E4DA */
  border-left: 4px solid var(--color-verde-botanico); /* #4A7A54 (acento gráfico) */
  border-radius: 0 6px 6px 0;
  padding: 24px 28px;                             /* aire interior generoso */
  margin: 32px 0;
}
.edt-note__label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--color-verde-bot-dark);            /* #3A6A44 · AA */
  margin-bottom: 8px;
}
.edt-note__body {
  font-family: var(--font-body); font-size: 16px; line-height: 1.7;
  color: var(--color-marron-texto);              /* ~10:1 sobre verde agua */
}
.edt-note__body > :last-child { margin-bottom: 0; }

/* Variante ADVERTENCIA REAL (rara): acompaña con role="alert" + acento coral */
.edt-note--alert { border-left-color: var(--color-coral-dark); }        /* #C0635A */
.edt-note--alert .edt-note__label { color: #A34A43; }                   /* AA */

/* ── UI-01 · Etiquetas de categoría (Manual B-7) ─────────────────────────────
   Dos variantes, mismo aspecto en reposo: .tag (descriptiva, <span>) ·
   .tag--link (navegable, <a>). Contraste corregido: texto #3A6A44 (4.8:1),
   hover #2F5838 (5.4:1) — el par #4A7A54/#D0E4DA de la ficha fallaba (3.3:1).
   Regla: máx. 1 etiqueta por tarjeta. Aprobado 2026-07-05. */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  background: var(--color-verde-agua);          /* #D0E4DA */
  color: var(--color-verde-bot-dark);           /* #3A6A44 · AA */
  padding: 4px 10px; border-radius: 4px; line-height: 1.4;
}
.tag--link { cursor: pointer; text-decoration: none; transition: background var(--transition-base), color var(--transition-base); }
.tag--link:hover { background: var(--color-verde-agua-dark); color: #2F5838; }   /* AA en hover */
.tag--link:focus-visible { outline: 2px solid var(--color-coral); outline-offset: 2px; }

/* ── LISTAS DE CONTENIDO (tipografía de contenido · sistema editorial) ────────
   Scope: .entry-content + utilidad .bm-list. No afecta a menús/footer/navegación.
   Viñeta = punto verde botánico #4A7A54 (discreto; no compite con el coral de acción
   ni diluye la hoja de EDT-03). Numeradas #3A6A44 negrita. Sublistas: círculo hueco /
   cuadrado / letras. Sangría colgante, aire 10px, cuerpo 16px. Semántica nativa
   (lector de pantalla anuncia la lista). Aprobado 2026-07-05. */
.entry-content ul, .entry-content ol,
.bm-list ul, .bm-list ol { margin: 0 0 24px; padding-left: 1.5em; }
.entry-content li, .bm-list li { font-size: 16px; line-height: 1.7; margin-bottom: 10px; }
.entry-content li:last-child, .bm-list li:last-child { margin-bottom: 0; }
.entry-content ul, .bm-list ul { list-style-type: disc; }
.entry-content ul ul, .bm-list ul ul { list-style-type: circle; }
.entry-content ul ul ul, .bm-list ul ul ul { list-style-type: square; }
.entry-content ol, .bm-list ol { list-style-type: decimal; }
.entry-content ol ol, .bm-list ol ol { list-style-type: lower-alpha; }
.entry-content li::marker, .bm-list li::marker { color: var(--color-verde-botanico); }
.entry-content ul li::marker, .bm-list ul li::marker { font-size: .85em; }
.entry-content ol li::marker, .bm-list ol li::marker { color: var(--color-verde-bot-dark); font-weight: 700; }
.entry-content li > ul, .entry-content li > ol,
.bm-list li > ul, .bm-list li > ol { margin: 10px 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   ✅ CAPA BASE DE COMPONENTES PRIMITIVOS · COMPLETA (9/9) · cerrada 2026-07-05
   BTN-01 · BTN-02 · BTN-03 · enlaces globales · FORM-01 · EDT-03 · EDT-02 · UI-01 · listas
   Toda la familia comparte tokens y criterio de accesibilidad AA. Acento de acción = coral
   profundo #A34A43 · acento botánico = #3A6A44/#4A7A54 · foco = 2px #EF8477.
   PENDIENTE (F1-GATE): migrar este components.css desde «CSS adicional» al tema hijo
   (File Manager: subir components.css + functions.php ya actualizado); actualizar nota
   de colores derivados accesibles en Design Tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── NAV-03 · Migas de pan (plantilla de página interior · Manual B-7) ─────────
   Accesible: enlaces #5A4A3F (~7:1), hover #A34A43, actual #3A3028; separador
   beige decorativo. Corrige el #BFAD9A documentado para el texto (1.9:1, fallaba).
   Selectores provisionales de Kadence — verificar en la primera página (F2). */
.kadence-breadcrumbs, .bm-breadcrumb { font-family: var(--font-body); font-size: 13px; margin-bottom: 16px; }
.kadence-breadcrumbs a, .bm-breadcrumb a { color: var(--color-gris-texto); text-decoration: none; }
.kadence-breadcrumbs a:hover, .bm-breadcrumb a:hover { color: #A34A43; }
.kadence-breadcrumbs .separator, .bm-breadcrumb .sep { color: var(--color-beige); margin: 0 6px; }
.kadence-breadcrumbs .current-item, .bm-breadcrumb [aria-current="page"] { color: var(--color-marron-texto); }

/* ════════════════════════════════════════════════════════════════════════════
   CAPA DE EXPERIENCIA · PÁGINA HISTORIA · "La casa de los recuerdos" (F2)
   Componentes narrativos. Prefijo .bm-. Basado en Historia_Experiencia_Definitiva
   + Curaduría (aprobado 2026-07). Todo con tokens y contraste AA. Texto de lectura
   ≤750px; bandas a sangre (alignfull) con contenedor interior centrado.
   ════════════════════════════════════════════════════════════════════════════ */

/* Bandas y contenedores → MOVIDOS a layout.css (Layout System · fundacional). */

/* ESCENA EDITORIAL · INTERIOR (antes "hero interior") · apertura de página interior.
   Nomenclatura Biomelisa: "Hero" desaparece; toda apertura es una Escena Editorial. */
.bm-escena--interior { text-align: center; padding: var(--space-2xl) 0 var(--space-xl); }
.bm-escena--interior h1 { font-family: var(--font-editorial); font-weight: 400; font-size: 56px; line-height: 1.15; margin: 0 0 var(--space-md); color: var(--color-marron-texto); }
.bm-escena__lead { font-family: var(--font-editorial); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--color-gris-texto); max-width: 620px; margin: 0 auto; }
.bm-portrait { max-width: 260px; margin: 0 auto var(--space-lg); border-radius: var(--border-radius-xl); }

/* TIME-01 · ancla temporal (cartel de sala) */
.bm-time { font-family: var(--font-body); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-gris-texto); margin: 0 0 var(--space-sm); }
.bm-time::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-verde-botanico); display: inline-block; margin-right: 8px; vertical-align: middle; }
.bm-band--oscuro .bm-time { color: #BCD3CA; }
.bm-band--oscuro .bm-time::before { background: #7FB79E; }

/* NUM-01 · cifra destacada (solo números ya presentes en el texto) */
.bm-num { font-family: var(--font-editorial); font-weight: 400; font-size: 96px; line-height: .9; color: var(--color-beige); display: block; margin: var(--space-md) 0; }
.bm-num small { display: block; font-family: var(--font-body); font-size: 15px; letter-spacing: .04em; color: var(--color-gris-texto); margin-top: 8px; }

/* QUOTE-01 · cita destacada (texto #3A3028 + filete coral · AA) */
.bm-quote { border: 0; margin: var(--space-lg) auto; max-width: 640px; text-align: center; padding: 0; }
.bm-quote::before, .bm-quote::after { content: ""; display: block; width: 40px; height: 2px; background: var(--color-coral); margin: 0 auto; }
.bm-quote::before { margin-bottom: var(--space-md); }
.bm-quote::after  { margin-top: var(--space-md); }
.bm-quote p { font-family: var(--font-editorial); font-style: italic; font-size: 30px; line-height: 1.4; color: var(--color-marron-texto); margin: 0; }
.bm-band--oscuro .bm-quote p { color: var(--color-blanco-roto); }

/* RECUERDO-01 · recuerdo recuperado (seña de identidad: imagen + fecha·título + frase) */
.bm-recuerdo { margin: 0 0 var(--space-lg); }
.bm-recuerdo img, .bm-recuerdo .bm-ph { border-radius: var(--border-radius-lg); display: block; width: 100%; }
.bm-recuerdo__date { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-verde-bot-dark); margin: 12px 0 0; }
.bm-recuerdo__ctx  { font-family: var(--font-editorial); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--color-gris-texto); margin: 4px 0 0; }

/* SPLIT / DUO / GALLERY (composición editorial) */
.bm-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.bm-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.bm-gallery--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
  .bm-split, .bm-gallery, .bm-gallery--3 { grid-template-columns: 1fr; }
  .bm-escena--interior h1 { font-size: 32px; }
  .bm-num { font-size: 64px; }
  .bm-quote p { font-size: 22px; }
}

/* MEDIA a sangre (.bm-media-full) → MOVIDO a layout.css. */

/* DOOR-01 · puerta al ecosistema (enlace contextual, fin de momento) */
.bm-door { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 15px; color: #A34A43; text-decoration: none; margin-top: var(--space-md); }
.bm-door::after { content: " \2192"; }
.bm-door:hover { text-decoration: underline; }
.bm-door:focus-visible { outline: 2px solid var(--color-coral); outline-offset: 2px; border-radius: 2px; }

/* Silencio / respiro (.bm-silencio · .bm-pause) → MOVIDOS a layout.css. */

/* Tríptico "casa digital" (⑦) */
.bm-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.bm-tri__card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--border-radius-xl); padding: var(--space-md); text-align: center; text-decoration: none; color: var(--color-marron-texto); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.bm-tri__card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.bm-tri__card h3 { font-family: var(--font-body); font-size: 18px; font-weight: 700; margin: 8px 0 4px; }
.bm-tri__card:focus-visible { outline: 2px solid var(--color-coral); outline-offset: 2px; }
@media (max-width: 767px) { .bm-tri { grid-template-columns: 1fr; } }

/* Placeholder de imagen/recurso (hasta subir el activo real o crearlo) */
.bm-ph { border: 1.5px dashed var(--color-beige); background: var(--color-fondo-beige); border-radius: var(--border-radius-lg); padding: 40px 24px; text-align: center; color: var(--color-gris-texto); min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.bm-ph__t { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--color-verde-bot-dark); margin: 0; }
.bm-ph__d { font-size: 12px; max-width: 380px; margin: 0; }

/* Base tipográfica de la página (autosuficiente · no depende de ajustes globales de Kadence) */
.bm-historia { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-marron-texto); }
.bm-historia h2 { font-family: var(--font-editorial); font-weight: 400; font-size: var(--text-h2); line-height: var(--lh-heading); color: var(--color-marron-texto); margin: 0 0 var(--space-md); }
.bm-historia h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-h3); margin: 0 0 var(--space-sm); }
.bm-historia p { margin: 0 0 22px; }
.bm-historia .bm-inner > :last-child { margin-bottom: 0; }

/* ✅ Capa de experiencia HISTORIA · lista para el patrón patterns/historia.php */