/* ============================================================================
   assets/css/camino.css — El Camino de la luz (/camino-de-santiago/) — oct. 2026
   Solo se carga en esas páginas. Los colores salen de Panel → Camino de la luz →
   Apariencia (variables --cm-* que pone la plantilla en .cm).
   ============================================================================ */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/camino/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/camino/cormorant-garamond-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/camino/cormorant-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/camino/caveat-latin-500-normal.woff2') format('woff2'); }

.cm {
  --cm-fondo: #000; --cm-tarjeta: #1b1124; --cm-oro: #f6d55c; --cm-acento: #c084fc;
  --cm-borde: #2c2038; --cm-texto: #f3eefa; --cm-suave: #d6cde3; --cm-tenue: #b7aec4;
  --cm-titulo: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  background: var(--cm-fondo); color: var(--cm-texto);
  text-align: left; border-radius: 18px; margin: 10px 0 28px; overflow: hidden;
  font-size: 1rem; line-height: 1.6;
}
.cm *, .cm *::before, .cm *::after { box-sizing: border-box; }
.cm a { color: var(--cm-oro); }
.cm a:hover { color: #fff4d6; }
.cm h1, .cm h2, .cm h3 { font-family: var(--cm-titulo); color: #fff4d6; font-weight: 700; line-height: 1.08; margin: 0; text-align: left; }
.cm p { margin: 0; }
.cm img { margin: 0 !important; }   /* anula la regla antigua del móvil (img con margen negativo) */
.cm-dentro { padding: 22px clamp(16px, 4vw, 44px); }
.cm-migas { font-size: .88rem; color: var(--cm-tenue); padding: 16px clamp(16px, 4vw, 44px) 0; }
.cm-migas a { color: var(--cm-tenue); }
.cm-aviso-previa { background: #fff3cd; color: #5c4400; padding: 10px 16px; font-size: .92rem; }
.cm-aviso-previa a { color: #54006a; font-weight: 600; }
.cm-error { background: #3a1018; border: 1px solid #a8392b; color: #ffd9d4; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; }
.cm-ok { background: #102a1b; border: 1px solid #2f7a4c; color: #d4f5df; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; }

/* ---------- botones ---------- */
.cm-boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 14px;
  background: var(--cm-oro); color: #17120a !important; font-weight: 700; font-size: 1.05rem; text-decoration: none; border: 0; cursor: pointer; }
.cm-boton:hover { filter: brightness(1.08); }
.cm-boton:focus-visible, .cm-boton-2:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cm-boton-2 { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 14px;
  border: 1px solid #4b3a60; color: var(--cm-texto) !important; text-decoration: none; background: transparent; font-weight: 500; }
.cm-boton-2:hover { border-color: var(--cm-oro); }
.cm-botones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- portada: cielo y mapa ---------- */
.cm-heroe { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 28px; align-items: center; padding: 34px clamp(16px, 4vw, 44px) 40px; }
.cm-cielo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cm-heroe > *:not(.cm-cielo) { position: relative; }
.cm-heroe-texto { display: flex; flex-direction: column; gap: 18px; }
.cm-pastilla { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid #5a4a26; background: #19160f; color: #f8e3a0; font-size: .85rem; font-weight: 600; }
.cm-h1-ante { display: block; font-family: system-ui, sans-serif; font-size: .95rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cm-oro); margin-bottom: 8px; }
.cm-heroe h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.cm-entradilla { font-size: 1.12rem; color: var(--cm-suave); max-width: 34rem; }
.cm-frase { font-family: var(--cm-titulo); font-style: italic; font-size: 1.3rem; color: var(--cm-oro); }
.cm-contador { display: flex; align-items: center; gap: 10px; color: var(--cm-suave); font-size: .98rem; }
.cm-contador b { color: #f8e3a0; }
.cm-luz { width: 10px; height: 10px; border-radius: 50%; background: #f8e3a0; box-shadow: 0 0 12px 3px rgba(246, 213, 142, .6); flex: none; }
.cm-mapa { width: 100%; height: auto; display: block; }
.cm-mapa .cm-parada { fill: var(--cm-fondo); stroke: #f8e3a0; stroke-width: 2; }
.cm-mapa .cm-nombre { fill: var(--cm-suave); font: 12px system-ui, sans-serif; }
.cm-mapa .cm-santiago { fill: #fff4d6; font: 700 20px var(--cm-titulo); }
.cm-mapa .cm-halo { fill: var(--cm-oro); opacity: .14; }
.cm-mapa .cm-estrella { fill: #fff4d6; }
.cm-mapa .cm-peregrino { fill: #fff4d6; opacity: .9; }
/* C4: tu progreso en el mapa, nombres de los caminos y leyenda */
.cm-mapa .cm-hecho-linea { fill: none; stroke: #5fd38d; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cm-mapa .cm-hecho { fill: #5fd38d; stroke: #0d2a18; stroke-width: 1.6; }
.cm-mapa .cm-aqui { fill: none; stroke: #5fd38d; stroke-width: 2.4; }
.cm-mapa .cm-ruta { font: 700 13px system-ui, sans-serif; letter-spacing: .03em; paint-order: stroke; stroke: var(--cm-fondo); stroke-width: 4px; stroke-linejoin: round; }
.cm-leyenda { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: .88rem; color: var(--cm-suave); }
.cm-leyenda li { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.cm-leyenda a { color: var(--cm-suave); text-decoration: none; }
.cm-leyenda a:hover, .cm-leyenda a:focus-visible { color: #fff4d6; text-decoration: underline; }
.cm-leyenda li.activo a { color: #fff4d6; font-weight: 600; }
.cm-ley-linea { width: 26px; height: 0; border-top: 3px dotted var(--c); flex: none; }
.cm-ley-hecho { width: 12px; height: 12px; border-radius: 50%; background: #5fd38d; flex: none; }
.cm-ley-aqui { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #5fd38d; flex: none; }
.cm-ley-luz { width: 7px; height: 7px; border-radius: 50%; background: #fff4d6; box-shadow: 0 0 6px 2px rgba(255, 244, 214, .5); flex: none; }
.cm, .cm [id] { scroll-margin-top: 8px; }
.cm-mapa-cred { max-width: 640px; margin: 14px auto 0; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .cm-mapa .cm-aqui { animation: cm-latir 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes cm-latir { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.35); } }
@media (prefers-reduced-motion: no-preference) {
  .cm-mapa .cm-peregrino { animation: cm-titilar 3.2s ease-in-out infinite; }
  .cm-mapa .cm-peregrino:nth-of-type(3n) { animation-delay: 1.1s; }
  .cm-mapa .cm-peregrino:nth-of-type(3n+1) { animation-delay: 2.2s; }
}
@keyframes cm-titilar { 0%, 100% { opacity: .95; } 50% { opacity: .35; } }

/* ---------- secciones ---------- */
.cm-seccion { padding: 30px clamp(16px, 4vw, 44px); border-top: 1px solid var(--cm-borde); }
.cm-seccion.oscura { background: #0c0712; }
.cm-seccion h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 8px; }
.cm-intro { color: var(--cm-tenue); margin-bottom: 22px !important; max-width: 46rem; }
.cm-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 18px; }
.cm-tarjeta { background: var(--cm-tarjeta); border: 1px solid var(--cm-borde); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cm-tarjeta h3 { font-size: 1.85rem; }
.cm-tarjeta-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cm-icono-camino { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); flex: none; }
.cm-datos { font-size: .85rem; color: var(--cm-tenue); }
.cm-paradas { list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-direction: column; }
.cm-paradas li { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--cm-suave); min-height: 26px; }
.cm-paradas li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--cm-color, var(--cm-oro)); flex: none; }
.cm-paradas li.fin { color: #f8e3a0; font-weight: 600; }
.cm-paradas li.fin::before { background: #f8e3a0; border-color: #f8e3a0; }
.cm-tarjeta .cm-boton-2 { margin-top: auto; border-color: var(--cm-color, #4b3a60); min-height: 48px; }
.cm-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 22px; }
.cm-paso-n { font-family: var(--cm-titulo); font-size: 2.6rem; font-weight: 700; color: var(--cm-oro); line-height: 1; }
.cm-paso-t { font-weight: 700; color: #fff4d6; margin: 6px 0 4px !important; }
.cm-paso-d { color: var(--cm-tenue); font-size: .95rem; }
.cm-faq details { border-bottom: 1px solid var(--cm-borde); padding: 12px 0; }
.cm-faq summary { cursor: pointer; font-weight: 600; color: #fff4d6; min-height: 32px; }
.cm-faq details p { color: var(--cm-suave); margin-top: 8px !important; }

/* ---------- página de un camino y de una etapa ---------- */
.cm-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px; align-items: center; }
.cm-cabecera h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.cm-ante { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cm-oro); font-weight: 600; margin-bottom: 8px !important; }
.cm-etapas { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cm-etapa-fila { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--cm-tarjeta); border: 1px solid var(--cm-borde); border-radius: 16px; padding: 12px 16px; text-decoration: none; color: var(--cm-texto) !important; }
.cm-etapa-fila:hover { border-color: var(--cm-oro); }
.cm-etapa-fila strong { color: #fff4d6; display: block; }
.cm-etapa-fila span { color: var(--cm-tenue); font-size: .9rem; }
.cm-etapa-fila strong span, .cm-etapa-fila span span { color: inherit; font-size: inherit; }   /* C4: textos traducibles dentro */
.cm-sello-mini { background: #f3ead6; border-radius: 50%; display: inline-flex; padding: 3px; }
.cm-texto { font-size: 1.08rem; color: var(--cm-suave); max-width: 46rem; }
.cm-oracion { margin-top: 20px !important; background: var(--cm-tarjeta); border: 1px solid var(--cm-borde); border-radius: 16px; padding: 18px 20px; max-width: 46rem; }
.cm-oracion h2 { font-family: system-ui, sans-serif; font-size: .82rem !important; letter-spacing: .12em; text-transform: uppercase; color: var(--cm-oro); margin-bottom: 8px !important; }
.cm-oracion p { font-family: var(--cm-titulo); font-style: italic; font-size: 1.32rem; line-height: 1.45; color: #f3eefa; }
.cm-navegar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.cm-navegar a { min-height: 44px; display: inline-flex; align-items: center; }
.cm-par-sellos { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cm-par-sellos .cm-flecha { color: var(--cm-oro); font-size: 1.6rem; }

/* ---------- formulario ---------- */
.cm-form { display: grid; gap: 14px; max-width: 40rem; }
.cm-form label { font-weight: 600; color: #fff4d6; display: block; margin-bottom: 6px; }
.cm-form input[type=text], .cm-form input[type=email], .cm-form textarea { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid #4b3a60; background: #120b19; color: #f3eefa; padding: 10px 14px; font-size: 1rem; }
.cm-form textarea { min-height: 84px; resize: vertical; }
.cm-form input:focus, .cm-form textarea:focus { outline: 2px solid var(--cm-oro); outline-offset: 1px; border-color: transparent; }
.cm-ayuda { font-size: .88rem; color: var(--cm-tenue); margin-top: 4px !important; }
.cm-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; color: var(--cm-suave) !important; }
.cm-check input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--cm-oro); }
.cm-trampa { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- credencial ---------- */
.cm-credencial-zona { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.cm-hoja { border-radius: 6px; overflow: hidden; color: #2b2216; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.cm-hoja.f-clasico { background-color: #f3ead6; background-image: repeating-linear-gradient(0deg, rgba(120, 90, 40, .035) 0 1px, transparent 1px 3px); border: 1px solid #d9c8a4; --tt: #7a2a1e; --ts: #6b5838; --tp: #1f3a78; --tl: #cdb98f; --tg: #bfa77a; }
.cm-hoja.f-pergamino { background-color: #e8d3a2; background-image: radial-gradient(ellipse at 50% 40%, rgba(255, 248, 225, .55), rgba(255, 248, 225, 0) 70%), radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(110, 70, 20, .35) 100%); border: 1px solid #b8975a; --tt: #6b2414; --ts: #5e4524; --tp: #3a2410; --tl: #b99a62; --tg: #a98852; }
.cm-hoja.f-oscuro { background-color: #1b1124; border: 1px solid #4b3a60; color: #f3eefa; --tt: #f6d55c; --ts: #b7aec4; --tp: #fff4d6; --tl: #3a2c4a; --tg: #4b3a60; }
.cm-hoja.f-blanco { background-color: #fff; border: 1px solid #e3dfe8; --tt: #54006a; --ts: #5d5468; --tp: #1f3a78; --tl: #e3dfe8; --tg: #cfc7da; }
.cm-hoja.f-imagen { background-color: #3b2f22; background-size: cover; background-position: center; color: #f5ead2; --tt: #ffd98a; --ts: #e4d3b0; --tp: #fff4d6; --tl: rgba(255, 255, 255, .28); --tg: rgba(255, 255, 255, .35); }
.cm-hoja-portada { display: flex; gap: 16px; align-items: center; padding: 22px 20px 18px; border-bottom: 1.5px dashed var(--tg); }
.cm-hoja-portada svg { flex: none; }
.cm-hoja-kicker { font-family: var(--cm-titulo); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ts); }
.cm-hoja-titulo { font-family: var(--cm-titulo); font-size: 2rem; font-weight: 700; line-height: .95; color: var(--tt); }
.cm-hoja-sub { font-size: .78rem; color: var(--ts); margin-top: 4px !important; }
.cm-hoja-datos { padding: 14px 20px; display: grid; gap: 8px; border-bottom: 1.5px dashed var(--tg); }
.cm-dato { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--tl); padding-bottom: 3px; min-width: 0; }
.cm-dato dt { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ts); white-space: nowrap; font-weight: 400; }
.cm-dato dd { font-family: Caveat, 'Segoe Print', cursive; font-size: 1.45rem; line-height: 1; color: var(--tp); margin: 0; overflow-wrap: anywhere; }
.cm-casillas { padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-casilla { min-height: 176px; border: 1px solid var(--tl); margin: -.5px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 18px 6px 8px; text-align: center; }
.cm-casilla-n { position: absolute; left: 8px; top: 5px; font-size: .7rem; color: var(--ts); }
.cm-casilla-fecha { font-family: Caveat, 'Segoe Print', cursive; font-size: 1.2rem; color: var(--tp); margin-top: -4px !important; }
.cm-casilla-nombre { font-size: .78rem; color: var(--ts); }
.cm-casilla-vacia { width: 74px; height: 74px; border-radius: 50%; border: 1.5px dashed var(--tg); margin-bottom: 6px; }
.cm-casilla.hoy .cm-casilla-vacia { border: 2px dashed var(--tt); display: flex; align-items: center; justify-content: center; }
.cm-casilla.nuevo .camino-sello { animation: cm-sellar .8s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes cm-sellar { 0% { transform: scale(1.9) rotate(-20deg); opacity: 0; } 60% { transform: scale(.92) rotate(-6deg); opacity: 1; } 100% { transform: scale(1) rotate(var(--giro, -6deg)); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cm-casilla.nuevo .camino-sello { animation: none; } }
.cm-progreso { height: 8px; border-radius: 999px; background: #2c2038; overflow: hidden; }
.cm-progreso span { display: block; height: 100%; background: var(--cm-oro); border-radius: 999px; }
.cm-hoy { display: flex; flex-direction: column; gap: 14px; }
.cm-hoy h2 { font-size: 2rem; }
.cm-espera { background: var(--cm-tarjeta); border: 1px solid var(--cm-borde); border-radius: 16px; padding: 18px; color: var(--cm-suave); }
.cm-vela { display: flex; justify-content: center; }
.cm-llama { transform-origin: 17px 26px; }
@media (prefers-reduced-motion: no-preference) { .cm-llama { animation: cm-llama 1.6s ease-in-out infinite; } }
@keyframes cm-llama { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.94, 1.06) translateY(-1px); } }
.cm-enlace-copiar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cm-enlace-copiar input { flex: 1 1 14rem; min-width: 0; min-height: 44px; border-radius: 10px; border: 1px solid #4b3a60; background: #120b19; color: #f3eefa; padding: 0 12px; }

@media (max-width: 900px) {
  .cm-heroe, .cm-cabecera, .cm-credencial-zona { grid-template-columns: minmax(0, 1fr); }
  .cm-credencial-zona > .cm-hoy { order: -1; }   /* en el móvil, primero la etapa de hoy */
  .cm-heroe { padding-top: 24px; }
}
@media (max-width: 480px) {
  .cm-etapa-fila { grid-template-columns: 48px minmax(0, 1fr); }
  .cm-etapa-fila > :last-child { display: none; }
  .cm-casilla { min-height: 150px; }
  .cm-hoja-titulo { font-size: 1.7rem; }
}