/* Ordenatec · Contacto (/contacto/)
   Se carga después de comun.css y no cambia ninguna de sus reglas: solo añade las piezas de esta página.
   Colores, letras, radios, sombras y curvas salen de los tokens de comun.css (= portada publicada).
   Solo se animan transform, opacity y trazos SVG. Sin .anima (movimiento reducido o sin JS) se ve
   el estado final de cada motivo. Catálogo del sistema: ../SISTEMA.md */

/* =========================================================
   ENTRADA
   ========================================================= */
.encabezado.contacto-entrada { padding-bottom: clamp(32px, 4vw, 48px); }
/* en escritorio, algo menos de aire arriba: «Reservar videollamada» entra entero en la primera pantalla (1440×900) */
@media (min-width: 1024px) { .encabezado.contacto-entrada { padding-top: 112px; } }
.contacto-entrada .titular-h1 { max-width: 16ch; }

/* =========================================================
   CANALES: tres tarjetas enteras pulsables
   ========================================================= */
.canales { position: relative; padding-bottom: clamp(56px, 7vw, 96px); }
/* «Elige tu canal.» es solo para lectores de pantalla: las tarjetas van justo debajo de la entradilla */
.rejilla.canales-lista { margin-top: 0; align-items: stretch; }

.canal { position: relative; isolation: isolate; display: flex; min-width: 0; transition: transform .25s var(--curva-llegada); }
.canal > .tarjeta { flex: 1 1 auto; }
/* sombra flotante fuera de la tarjeta (la tarjeta recorta con overflow): solo cambia su opacidad */
.canal::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 20px; pointer-events: none;
  box-shadow: var(--sombra-flotante); opacity: 0; transition: opacity .25s var(--curva-llegada);
}
.canal:focus-within { transform: translateY(-3px); }
.canal:focus-within::after { opacity: 1; }
@media (hover: hover) {
  .canal:hover { transform: translateY(-3px); }
  .canal:hover::after { opacity: 1; }
  .canal:hover .tarjeta-titulo { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
}

/* Toda la tarjeta es pulsable: el enlace real (el botón) se extiende por encima con un pseudo */
.canal-accion::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.canal .tarjeta-titulo { font-size: clamp(26px, 2.5vw, 32px); }
.canal .tarjeta-linea { max-width: 34ch; }

/* Videollamada: la principal, con filo y luz aguamarina (el realce dice «recomendada» sin palabras) */
.canal-principal > .tarjeta {
  background: radial-gradient(70% 34% at 50% 0%, rgba(23, 184, 246, .15), transparent 72%), var(--superficie);
  box-shadow: inset 0 0 0 1px rgba(23, 184, 246, .42), 0 36px 80px -40px rgba(23, 184, 246, .34), var(--sombra-ui);
}

/* Dato con icono (duración, número, dirección) */
.canal-dato {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 18px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--filete-t);
  font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--texto-claro); font-variant-numeric: tabular-nums;
}
.canal-dato .icono { width: 22px; height: 22px; margin-top: -1px; }
.canal-correo { min-width: 0; }
/* el dato (número, dirección) queda por encima del enlace extendido: se puede seleccionar y copiar */
.canal-dato { position: relative; z-index: 2; cursor: text; }
.canal-correo-dir { overflow-wrap: anywhere; }

/* Copiar correo: botón de texto por encima del enlace extendido */
.copiar {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 -8px -10px; padding: 0 12px 0 10px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 650; color: var(--nav-texto);
  transition: background-color .2s ease, color .2s ease;
}
.copiar[hidden] { display: none; }
.copiar:hover { color: var(--blanco); background: rgba(255, 255, 255, .07); }
.copiar .icono { width: 20px; height: 20px; color: currentColor; }
.copiar-texto { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(213, 224, 238, .4); }
.copiar-hecho { display: none; }
.copiar.es-copiado { color: var(--aguamarina); }
.copiar.es-copiado .copiar-texto { text-decoration-color: transparent; }
.copiar.es-copiado .copiar-icono { display: none; }
.copiar.es-copiado .copiar-hecho { display: block; }
.copiar-hecho path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.anima .copiar.es-copiado .copiar-hecho path { animation: c-traza .4s cubic-bezier(.25, .1, .25, 1) both; }
@keyframes c-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Escritorio: las filas de las tres tarjetas (motivo, nombre, frase, dato y botón) se alinean entre sí */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1024px) {
    .rejilla.canales-lista { row-gap: 0; }
    .canal { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .canal > .tarjeta { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .canal .tarjeta-pie { align-self: end; }
  }
}
/* Tres columnas solo desde 1024 px: por debajo, los botones no caben en una línea */
@media (max-width: 1023px) { .rejilla.canales-lista { grid-template-columns: minmax(0, 1fr); } }
/* Tableta: tarjetas apaisadas (motivo a la izquierda) para no estirarlas a todo el ancho */
@media (min-width: 640px) and (max-width: 1023px) {
  .canal > .tarjeta {
    display: grid; grid-template-columns: minmax(240px, 5fr) minmax(0, 6fr); grid-template-rows: auto auto auto 1fr;
    column-gap: 32px; padding: 26px 28px 28px;
  }
  .canal > .tarjeta > * { grid-column: 2; }
  .canal > .tarjeta > .canal-motivo { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; }
}

/* =========================================================
   MOTIVOS DE LOS CANALES (decorativos, una vez al entrar)
   --d: retardo de la tarjeta; en escritorio entran en cascada
   ========================================================= */
.canal-motivo { position: relative; height: 112px; margin: -4px -8px 20px; --d: .1s; }
@media (min-width: 1024px) {
  .canales-lista > .canal:nth-child(1) .canal-motivo { --d: .45s; }
  .canales-lista > .canal:nth-child(2) .canal-motivo { --d: .8s; }
  .canales-lista > .canal:nth-child(3) .canal-motivo { --d: 1.15s; }
}

/* ---------- Videollamada: calendario; el foco busca y un hueco se ilumina ---------- */
.mc-luz {
  position: absolute; left: 50%; bottom: -10px; width: 260px; height: 44px; margin-left: -130px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(23, 184, 246, .3), rgba(23, 184, 246, .08) 60%, transparent);
}
.mc-panel {
  position: absolute; inset: 4px 8px; display: grid; align-content: center; gap: 8px; padding: 0 16px; overflow: hidden;
  border-radius: 14px; background: #F7FAFD;
  box-shadow: 0 0 0 1px rgba(11, 27, 51, .06), 0 16px 30px -18px rgba(2, 8, 20, .8);
}
.mc-cabeza { display: flex; align-items: center; justify-content: space-between; height: 10px; }
.mc-mes { display: block; width: 34%; height: 7px; border-radius: 4px; background: #3F5670; }
.mc-flechas { display: flex; gap: 10px; padding-right: 3px; }
.mc-flechas i { display: block; width: 6px; height: 6px; border-top: 2px solid #9CB0CC; border-left: 2px solid #9CB0CC; transform: rotate(-45deg); }
.mc-flechas i + i { transform: rotate(135deg); }
.mc-dias, .mc-rejilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mc-dias i { display: block; width: 44%; height: 4px; border-radius: 2px; background: #C3D1DD; }
.mc-rejilla { position: relative; }
.mc-rejilla > i { position: relative; display: block; height: 18px; border-radius: 5px; background: #EDF2F7; box-shadow: inset 0 0 0 1px #DCE5EE; }
.mc-rejilla > .mc-ocupado { background: #DDE6EE; box-shadow: none; }
.mc-ocupado::after { content: ""; position: absolute; left: 7px; top: 7px; width: 52%; height: 4px; border-radius: 2px; background: #AFC1D1; }
.mc-relleno { position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(90deg, #0E7C90, #0B64F0); transform-origin: 0 50%; }
.mc-aro { position: absolute; inset: -4px; border-radius: 8px; box-shadow: 0 0 0 2px #17B8F6, 0 0 18px -2px rgba(23, 184, 246, .75); }
.mc-check { position: absolute; left: 50%; top: 50%; width: 20px; height: 12px; margin: -6px 0 0 -10px; overflow: visible; }
.mc-check path { fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* el foco que salta de hueco en hueco (columna = 100 % de su ancho + 6 px de hueco) */
.mc-rejilla > .mc-foco {
  position: absolute; left: 0; top: 0; width: calc((100% - 24px) / 5); height: 18px; border-radius: 5px;
  background: rgba(23, 184, 246, .16); box-shadow: inset 0 0 0 1.5px rgba(23, 184, 246, .75);
  opacity: 0; transform: translate(calc(200% + 12px), calc(100% + 6px));
}

.anima .motivo-cal:not(.es-vista) .mc-rejilla > i:not(.mc-foco) { opacity: 0; }
.anima .motivo-cal:not(.es-vista) .mc-relleno { transform: scaleX(0); }
.anima .motivo-cal:not(.es-vista) .mc-aro { opacity: 0; }
.anima .motivo-cal:not(.es-vista) .mc-check path { stroke-dashoffset: 1; }
.anima .motivo-cal:not(.es-vista) .mc-luz { opacity: .35; }
.anima .motivo-cal.es-vista .mc-rejilla > i:not(.mc-foco) { animation: mc-celda .42s var(--curva-llegada) both; animation-delay: calc(var(--d) + var(--k, 0) * 35ms); }
.anima .motivo-cal.es-vista .mc-rejilla > .mc-foco { animation: mc-foco 1.15s var(--curva-llegada) both; animation-delay: calc(var(--d) + .55s); }
.anima .motivo-cal.es-vista .mc-relleno { animation: mc-llena .45s var(--curva-llegada) both; animation-delay: calc(var(--d) + 1.62s); }
.anima .motivo-cal.es-vista .mc-aro { animation: mc-aro .5s var(--curva-llegada) both; animation-delay: calc(var(--d) + 1.72s); }
.anima .motivo-cal.es-vista .mc-check path { animation: c-traza .38s cubic-bezier(.25, .1, .25, 1) both; animation-delay: calc(var(--d) + 1.9s); }
.anima .motivo-cal.es-vista .mc-luz { animation: mc-luz .9s cubic-bezier(.37, 0, .63, 1) both; animation-delay: calc(var(--d) + 1.62s); }
@keyframes mc-celda { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes mc-foco {
  0% { opacity: 0; transform: translate(0, 0) scale(.9); }
  12% { opacity: 1; transform: translate(0, 0) scale(1); }
  36% { transform: translate(calc(100% + 6px), 0) scale(1); }
  62% { transform: translate(calc(300% + 18px), 0) scale(1); }
  88% { opacity: 1; transform: translate(calc(200% + 12px), calc(100% + 6px)) scale(1); }
  100% { opacity: 0; transform: translate(calc(200% + 12px), calc(100% + 6px)) scale(1.1); }
}
@keyframes mc-llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mc-aro { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes mc-luz { from { opacity: .35; } to { opacity: 1; } }

/* ---------- WhatsApp: burbujas que se escriben ---------- */
.mw-burbuja { position: absolute; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 11px; box-shadow: 0 12px 24px -14px rgba(2, 8, 20, .8); }
.mw-sale { right: 16px; top: 6px; border-radius: 16px 16px 5px 16px; background: linear-gradient(165deg, #E9FAFF 0%, #CFF3FC 100%); transform-origin: 100% 100%; }
.mw-llega { left: 16px; bottom: 4px; border-radius: 16px 16px 16px 5px; background: #F7FAFD; transform-origin: 0 100%; }
.mw-escribe {
  left: 16px; bottom: 4px; flex-direction: row; align-items: center; gap: 5px; height: 34px; padding: 0 14px;
  border-radius: 16px 16px 16px 5px; background: #F7FAFD; transform-origin: 0 100%;
  opacity: 0; transform: scale(.3);
}
.mw-escribe i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #9CB0CC; }
.mw-lin { display: flex; align-items: center; gap: 5px; height: 6px; }
.mw-lin > i { display: block; width: var(--w); height: 5px; border-radius: 2.5px; background: rgba(36, 52, 79, .42); transform-origin: 0 50%; }
.mw-sale .mw-lin > i { background: rgba(11, 100, 240, .5); }
.mw-vistos { width: 18px; height: 10px; margin-left: 4px; overflow: visible; }
.mw-vistos path { fill: none; stroke: #0E7C90; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

.anima .motivo-chat:not(.es-vista) .mw-sale, .anima .motivo-chat:not(.es-vista) .mw-llega { opacity: 0; transform: scale(.2); }
.anima .motivo-chat:not(.es-vista) .mw-lin > i { transform: scaleX(0); }
.anima .motivo-chat:not(.es-vista) .mw-vistos path { stroke-dashoffset: 1; }
.anima .motivo-chat.es-vista .mw-sale { animation: mw-crece .5s var(--curva-llegada) both; animation-delay: var(--d); }
.anima .motivo-chat.es-vista .mw-sale .mw-lin > i { animation: mw-escribe .15s linear both; animation-delay: calc(var(--d) + .38s + var(--k, 0) * 90ms); }
.anima .motivo-chat.es-vista .mw-vistos path { animation: c-traza .22s cubic-bezier(.25, .1, .25, 1) both; animation-delay: calc(var(--d) + .98s); }
.anima .motivo-chat.es-vista .mw-vistos path + path { animation-delay: calc(var(--d) + 1.1s); }
.anima .motivo-chat.es-vista .mw-escribe { animation: mw-escribiendo 1.25s var(--curva-llegada) both; animation-delay: calc(var(--d) + 1.2s); }
.anima .motivo-chat.es-vista .mw-escribe i { animation: mw-punto .46s cubic-bezier(.37, 0, .63, 1) 2 both; animation-delay: calc(var(--d) + 1.42s); }
.anima .motivo-chat.es-vista .mw-escribe i:nth-child(2) { animation-delay: calc(var(--d) + 1.54s); }
.anima .motivo-chat.es-vista .mw-escribe i:nth-child(3) { animation-delay: calc(var(--d) + 1.66s); }
.anima .motivo-chat.es-vista .mw-llega { animation: mw-crece .5s var(--curva-llegada) both; animation-delay: calc(var(--d) + 2.38s); }
.anima .motivo-chat.es-vista .mw-llega .mw-lin > i { animation: mw-escribe .15s linear both; animation-delay: calc(var(--d) + 2.62s + var(--k, 0) * 90ms); }
@keyframes mw-crece { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes mw-escribe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* la burbuja «escribiendo…» nace de su cola, vive un momento y se recoge en el mismo punto */
@keyframes mw-escribiendo {
  0% { opacity: 0; transform: scale(.3); }
  22% { opacity: 1; transform: scale(1); }
  82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.3); }
}
@keyframes mw-punto { 0%, 100% { transform: none; } 45% { transform: translateY(-4px); } }

/* ---------- Correo: la hoja entra, la solapa se cierra y el sobre sale ---------- */
.mo-escena { position: absolute; left: 50%; top: 0; width: 236px; height: 112px; margin-left: -118px; }
/* luz cálida del papel bajo el sitio donde se queda el sobre */
.mo-luz {
  position: absolute; left: 76px; top: 62px; width: 164px; height: 34px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(239, 230, 211, .15), rgba(239, 230, 211, .04) 60%, transparent);
}
.mo-estela { position: absolute; left: 0; top: 0; width: 236px; height: 112px; overflow: visible; }
.mo-puntos { fill: none; stroke: #17B8F6; stroke-opacity: .7; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .01 7; }
.mo-revela { fill: none; stroke: #FFFFFF; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mo-sombra {
  position: absolute; left: 36px; top: 92px; width: 116px; height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(1, 5, 14, .65), rgba(1, 5, 14, 0));
  opacity: 0; transform: scale(.7);
}
/* estado final: el sobre ya ha salido, arriba a la derecha y algo más lejos */
.mo-sobre { position: absolute; left: 34px; top: 38px; width: 120px; height: 60px; transform-origin: 50% 50%; transform: translate(62px, -22px) rotate(-7deg) scale(.8); }
.mo-sobre > * { position: absolute; display: block; overflow: visible; }
.mo-solapa-abierta { left: 0; top: -34px; width: 120px; height: 34px; transform-origin: 50% 100%; transform: scaleY(0); }
.mo-hoja {
  left: 21px; top: 7px; width: 78px; height: 48px; padding: 8px 9px; display: grid; align-content: start; gap: 5px;
  border-radius: 2px; background: linear-gradient(to bottom, #FDFBF6, #F4EFE4);
  box-shadow: 0 1px 2px rgba(3, 10, 25, .3), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.mo-hoja i { display: block; height: 3px; border-radius: 1.5px; background: rgba(36, 52, 79, .38); }
.mo-hoja i:nth-child(1) { width: 58%; background: rgba(11, 27, 51, .75); }
.mo-hoja i:nth-child(2) { width: 100%; }
.mo-hoja i:nth-child(3) { width: 86%; }
.mo-hoja i:nth-child(4) { width: 94%; }
.mo-hoja i:nth-child(5) { width: 52%; }
.mo-frente { left: 0; top: 0; width: 120px; height: 60px; }
.mo-solapa-cerrada { left: 0; top: 0; width: 120px; height: 34px; transform-origin: 50% 0; }

.anima .motivo-correo:not(.es-vista) .mo-hoja { transform: translateY(-40px); }
.anima .motivo-correo:not(.es-vista) .mo-solapa-abierta { transform: none; }
.anima .motivo-correo:not(.es-vista) .mo-solapa-cerrada { transform: scaleY(0); }
.anima .motivo-correo:not(.es-vista) .mo-sobre { transform: none; }
.anima .motivo-correo:not(.es-vista) .mo-sombra { opacity: 1; transform: none; }
.anima .motivo-correo:not(.es-vista) .mo-revela { stroke-dashoffset: 1; }
.anima .motivo-correo:not(.es-vista) .mo-luz { opacity: 0; }
.anima .motivo-correo.es-vista .mo-hoja { animation: mo-hoja .72s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--d) + .12s); }
.anima .motivo-correo.es-vista .mo-solapa-abierta { animation: mo-pliega .22s cubic-bezier(.7, 0, .84, 0) both; animation-delay: calc(var(--d) + .86s); }
.anima .motivo-correo.es-vista .mo-solapa-cerrada { animation: mo-cierra .34s var(--curva-rebote) both; animation-delay: calc(var(--d) + 1.08s); }
.anima .motivo-correo.es-vista .mo-sobre { animation: mo-sale .95s cubic-bezier(.45, 0, .2, 1) both; animation-delay: calc(var(--d) + 1.5s); }
.anima .motivo-correo.es-vista .mo-sombra { animation: mo-sombra .95s cubic-bezier(.45, 0, .2, 1) both; animation-delay: calc(var(--d) + 1.5s); }
.anima .motivo-correo.es-vista .mo-luz { animation: mo-luz .8s cubic-bezier(.37, 0, .63, 1) both; animation-delay: calc(var(--d) + 2s); }
.anima .motivo-correo.es-vista .mo-revela { animation: c-traza .9s cubic-bezier(.45, 0, .2, 1) both; animation-delay: calc(var(--d) + 1.56s); }
@keyframes mo-hoja { from { transform: translateY(-40px); } to { transform: none; } }
@keyframes mo-pliega { from { transform: none; } to { transform: scaleY(0); } }
@keyframes mo-cierra { from { transform: scaleY(0); } to { transform: none; } }
@keyframes mo-sale {
  0% { transform: none; }
  18% { transform: translate(0, 2px) scale(1.01, .97); }
  100% { transform: translate(62px, -22px) rotate(-7deg) scale(.8); }
}
@keyframes mo-luz { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-sombra { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.7); } }

/* =========================================================
   DESPUÉS DE ESCRIBIRNOS (riel de comun.css: nodos, título y una línea)
   ========================================================= */
.pasos .riel-texto { max-width: 32ch; }

/* =========================================================
   PREGUNTAS (titular a la izquierda, como «Detrás del radar hay personas»)
   ========================================================= */
.contacto-preguntas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.contacto-preguntas .titular { max-width: 11ch; }
.contacto-preguntas .pregunta-resp .enlace-texto { margin-top: -6px; }
@media (max-width: 900px) {
  .contacto-preguntas { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .contacto-preguntas .titular { max-width: none; }
}


/* =========================================================
   MOVIMIENTO REDUCIDO, CONTRASTE ALTO E IMPRESIÓN
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .canal, .canal::after, .copiar { transition: none; }
  .canal:hover, .canal:focus-within { transform: none; }
}
@media (prefers-contrast: more) {
  .mc-luz, .mo-luz { display: none; }
  .canal-principal > .tarjeta { box-shadow: inset 0 0 0 2px var(--aguamarina); }
}
@media print {
  .canal-motivo, .copiar { display: none !important; }
  .canal-accion::after { display: none; }
}