/* ═══════════════════════════════════════════════════════════════════════
   LA CARTA  ·  formulario de contacto que se dobla en avión de papel
   Todo vive bajo .ca — ni un selector toca el resto de la página.
   No hay reglas sobre body, *, h1 suelto ni :focus-visible global.
   ═══════════════════════════════════════════════════════════════════════ */

.ca{
  /* ── Paleta · brandbook Operativa.Network v1.0 ──
     Tinta #0C0E0D · Sangre #C1121F · Clínico #2D5A41 · Papel #F2EFE8 · Muted #888880
     Los tonos menta son tintes de Clínico; los -som/-osc, sombras derivadas. */
  --ca-menta:#D3E0D9;  --ca-menta-osc:#B6CCC1; --ca-menta-cla:#E4EDE8;
  --ca-papel:#F2EFE8;  --ca-papel-som:#DFD9CC;
  --ca-tinta:#0C0E0D;  --ca-lapiz:#888880;     --ca-fucsia:#C1121F;
  /* Muted mide 3.11:1 sobre la hoja y 2.99:1 sobre la menta: no llega al
     4.5:1 que pide WCAG AA para texto. --ca-lapiz se queda para las líneas
     de pliegue, que son decorativas; el texto usa este gris un paso más
     oscuro (4.74:1 sobre la hoja, 4.56:1 sobre la menta). */
  --ca-lapiz-txt:#6A6A63;

  /* ── Personaje ── */
  --ca-piel:#B9784F;   --ca-piel-osc:#9E633E;  --ca-pelo:#23201E;
  --ca-ropa:#2D5A41;   --ca-ropa-osc:#22452F;  --ca-pantalon:#25302B;

  /* ── Tipografías · brandbook: Fraunces display, Figtree texto ──
     Caveat se conserva: es la manuscrita con la que se ve lo que el visitante
     escribe, y el brandbook no tiene equivalente. Sin ella el efecto se pierde. */
  --ca-serif:"Fraunces",Georgia,serif;
  --ca-ui:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ca-mano:"Caveat","Segoe Script",cursive;

  position:relative;
  display:flex;flex-direction:column;align-items:center;
  width:100%;padding:38px 24px 40px;
  font-family:var(--ca-ui);color:var(--ca-tinta);
  background:linear-gradient(178deg, var(--ca-menta-cla) 0%, var(--ca-menta) 52%, var(--ca-menta-osc) 100%);
  overflow:hidden;
}
.ca *{box-sizing:border-box}
.ca :focus-visible{outline:2px solid var(--ca-fucsia);outline-offset:3px;border-radius:2px}

/* ═══════════════════════════════════════════════════════════════
   ENCABEZADO
   ═══════════════════════════════════════════════════════════════ */
.ca-encabezado{width:100%;max-width:520px;margin:0 0 20px}
.ca-rotulo{
  font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ca-lapiz-txt);margin:0 0 9px;
}
.ca-titulo{
  font-family:var(--ca-serif);font-weight:400;
  font-size:clamp(34px,7vw,52px);line-height:.98;letter-spacing:-.01em;
  margin:0;color:var(--ca-tinta);
}
.ca-titulo em{font-style:italic;color:var(--ca-fucsia)}
.ca-bajada{
  font-size:14px;color:var(--ca-lapiz-txt);margin:11px 0 0;
  max-width:38ch;line-height:1.55;
}

/* ═══════════════════════════════════════════════════════════════
   PISO — la hoja y el personaje son hermanos, sin posiciones mágicas
   ═══════════════════════════════════════════════════════════════ */
.ca-piso{
  position:relative;width:100%;max-width:760px;
  display:flex;justify-content:center;align-items:flex-end;
  padding-bottom:10px;perspective:1400px;
}
.ca-piso::before{
  content:"";position:absolute;left:50%;bottom:-4px;
  width:min(600px,94%);height:190px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(255,255,255,.55), transparent 68%);
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════
   LA HOJA
   ═══════════════════════════════════════════════════════════════ */
.ca-hoja-env{
  position:relative;z-index:3;flex:0 1 430px;min-width:0;
  transform-style:preserve-3d;
}
.ca-hoja{
  position:relative;
  background:linear-gradient(172deg, var(--ca-papel), #F3EEE2);
  padding:26px 26px 20px;
  transform:rotateX(9deg) rotate(-1.4deg);
  transform-origin:50% 100%;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 30px -16px rgba(28,35,32,.42),
    0 3px 0 -1px var(--ca-papel-som);
  transition:transform .6s cubic-bezier(.3,.9,.3,1), opacity .3s;
}
.ca-hoja::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(0deg, rgba(28,35,32,.035) 0 1px, transparent 1px 4px);
}

/* ─── Pliegues ───
   Se revelan escalando desde el borde. El stroke-dashoffset no sirve
   aquí: con un dasharray corto solo desplaza el patrón de guiones,
   no oculta la línea.                                                */
.ca-pliegues{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.ca-pliegues path{fill:none;stroke:var(--ca-lapiz);stroke-width:1.4;stroke-dasharray:7 6}
.ca-pliegue{
  transform-box:view-box;opacity:.42;
  transition:transform .7s cubic-bezier(.3,.9,.3,1), opacity .4s;
}
.ca-pliegue--h{transform:scaleX(0)}
.ca-pliegue--v{transform:scaleY(0)}
.ca-pliegue.is-marcado{transform:none}
.ca-pliegue--1{transform-origin:0px 151px}
.ca-pliegue--2{transform-origin:0px 289px}
.ca-pliegue--3{transform-origin:200px 0px}

/* ─── Contenido ─── */
.ca-membrete{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ca-lapiz-txt);
  border-bottom:1px solid rgba(28,35,32,.14);padding-bottom:9px;margin-bottom:16px;
}
.ca-renglon{margin-bottom:14px;position:relative}
.ca-guia{
  font-size:11px;color:var(--ca-lapiz-txt);display:block;
  margin-bottom:2px;letter-spacing:.02em;
}
.ca-escrito{
  width:100%;font-family:var(--ca-mano);font-size:23px;font-weight:600;
  color:var(--ca-tinta);background:transparent;border:none;
  border-bottom:1.5px solid rgba(28,35,32,.2);
  padding:2px 2px 4px;line-height:1.35;margin:0;
}
/* El placeholder lleva instrucción real ("tu consultorio o clínica"), así que
   es texto y le aplica el 4.5:1. A .24 medía 1.62:1. Sigue distinguiéndose de
   lo escrito por el peso: 500 frente a los 600 del campo. */
.ca-escrito::placeholder{color:rgba(28,35,32,.64);font-weight:500}
.ca-escrito:focus{outline:none;border-bottom-color:var(--ca-fucsia)}
textarea.ca-escrito{
  resize:none;min-height:93px;border-bottom:none;
  padding:0 2px;line-height:31px;
  background-image:repeating-linear-gradient(180deg,
     transparent 0 30px, rgba(28,35,32,.16) 30px 31px);
}

/* ─── Opciones que se encierran a mano ─── */
.ca-circulables{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:5px}
.ca-circulable{
  position:relative;background:none;border:none;cursor:pointer;
  font-family:var(--ca-mano);font-size:22px;font-weight:600;color:var(--ca-tinta);
  /* .55 daba 4.13:1. La opción sin elegir sigue siendo la apagada: lo que la
     distingue de la elegida es el rojo y el círculo trazado, no el gris. */
  padding:5px 9px;line-height:1;opacity:.68;transition:opacity .2s,color .2s;
}
.ca-circulable:hover{opacity:.88}
.ca-circulable[aria-pressed="true"]{opacity:1;color:var(--ca-fucsia)}
.ca-circulable svg{
  position:absolute;inset:-7px -4px;
  width:calc(100% + 8px);height:calc(100% + 14px);
  pointer-events:none;overflow:visible;
}
.ca-circulable ellipse{
  fill:none;stroke:var(--ca-fucsia);stroke-width:2.1;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;   /* pathLength=100 ⇒ oculta completo */
  transition:stroke-dashoffset .5s cubic-bezier(.3,.9,.3,1);
}
.ca-circulable[aria-pressed="true"] ellipse{stroke-dashoffset:0}

/* ─── Cierre de la carta ─── */
.ca-pie{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:16px;padding-top:13px;border-top:1px solid rgba(28,35,32,.14);
}
.ca-nota{font-size:11px;color:var(--ca-lapiz-txt);max-width:19ch;line-height:1.5;margin:0}
.ca-nota.is-mal{color:var(--ca-fucsia);font-weight:600}
.ca-lanzar{
  position:relative;display:inline-flex;align-items:center;
  font-family:var(--ca-mano);font-size:25px;font-weight:700;
  color:var(--ca-tinta);text-decoration:none;padding:6px 15px;white-space:nowrap;
  transition:color .2s, transform .12s, opacity .2s;
}
.ca-marco{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ca-marco path{
  fill:none;stroke:var(--ca-tinta);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340;
  transition:stroke-dashoffset .6s cubic-bezier(.3,.9,.3,1), stroke .2s;
}
.ca-lanzar[data-listo="si"]{color:var(--ca-fucsia)}
.ca-lanzar[data-listo="si"] .ca-marco path{stroke-dashoffset:0;stroke:var(--ca-fucsia)}
.ca-lanzar[data-listo="si"]:hover{transform:translateY(-2px)}
/* A .45 el texto Tinta medía 2.98:1 sobre la hoja: el CTA en reposo es lo
   primero que ve todo visitante y el control sí responde al clic, así que no
   le aplica la exención de control deshabilitado. A .62 mide 5.21:1. Lo que
   dice "todavía no" sigue siendo el marco sin trazar, no el gris. */
.ca-lanzar[aria-disabled="true"]{opacity:.62}

/* ─── Doblado ─── */
.ca-hoja-env[data-dobla="1"] .ca-hoja{transform:rotateX(9deg) rotate(-1.4deg) scaleY(.52)}
.ca-hoja-env[data-dobla="2"] .ca-hoja{transform:rotateX(9deg) rotate(-1.4deg) scaleY(.52) scaleX(.46)}
.ca-hoja-env[data-dobla="3"] .ca-hoja{transform:rotateX(9deg) rotate(-16deg) scaleY(.28) scaleX(.34);opacity:0}
.ca-hoja-env[data-dobla] .ca-hoja > *:not(.ca-pliegues){opacity:0;transition:opacity .18s}

/* ─── Estado de cierre ─── */
.ca-despues{
  position:absolute;inset:0;z-index:7;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:20px;
  /* Sin visibility, "escribir otra" seguía recibiendo foco con el panel
     invisible. El retardo conserva la transición de salida. */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
.ca-despues[data-visible="si"]{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s ease, visibility 0s}
.ca-despues p{
  font-family:var(--ca-mano);font-size:29px;font-weight:600;
  line-height:1.2;max-width:16ch;margin:0;
}
.ca-despues small{font-size:12px;color:var(--ca-lapiz-txt);max-width:26ch;line-height:1.5}
.ca-otra{
  font-family:var(--ca-ui);font-size:12px;font-weight:500;background:transparent;
  border:1px solid rgba(28,35,32,.28);color:var(--ca-tinta);
  padding:7px 14px;border-radius:20px;cursor:pointer;
  transition:background .16s,border-color .16s;
}
.ca-otra:hover{border-color:var(--ca-tinta);background:rgba(255,255,255,.5)}

/* ═══════════════════════════════════════════════════════════════
   AVIÓN — vive dentro de la envoltura, sale desde donde estaba la hoja
   ═══════════════════════════════════════════════════════════════ */
.ca-avion{
  position:absolute;left:48%;top:40%;width:74px;z-index:6;pointer-events:none;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
}
.ca-avion.is-vuela{animation:ca-vuelo 1.45s cubic-bezier(.35,.02,.5,1) forwards}
@keyframes ca-vuelo{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0deg)}
  14% {opacity:1;transform:translate(-50%,-78%) scale(.9) rotate(-6deg)}
  100%{opacity:0;transform:translate(calc(-50% + 330px), calc(-50% - 280px)) scale(1.15) rotate(-26deg)}
}
.ca-estela{fill:none;stroke:rgba(28,35,32,.3);stroke-width:2;stroke-linecap:round;stroke-dasharray:4 9}

/* ═══════════════════════════════════════════════════════════════
   PERSONAJE
   ═══════════════════════════════════════════════════════════════ */
.ca-artista{
  flex:0 0 auto;width:186px;height:auto;
  margin-left:-44px;margin-bottom:2px;align-self:flex-end;
  z-index:2;pointer-events:none;overflow:visible;
  transition:transform .6s cubic-bezier(.3,1.1,.4,1);
}
.ca-cuerpo{transform-box:view-box;transform-origin:120px 300px}
.ca-torso {transform-box:view-box;transform-origin:118px 214px}
.ca-cabeza{transform-box:view-box;transform-origin:120px 150px}
.ca-hombro{transform-box:view-box;transform-origin:118px 158px}
.ca-codo  {transform-box:view-box;transform-origin:118px 206px}
.ca-muslo {transform-box:view-box;transform-origin:118px 224px}
.ca-tibia {transform-box:view-box;transform-origin:150px 268px}
.ca-hombro,.ca-codo,.ca-muslo,.ca-tibia,.ca-torso,.ca-cabeza{
  transition:transform .5s cubic-bezier(.3,1.1,.4,1);
}

/* Reposo arrodillada */
.ca[data-fase="reposo"] .ca-hombro--a{transform:rotate(-38deg)}
.ca[data-fase="reposo"] .ca-hombro--b{transform:rotate(-30deg)}
.ca[data-fase="reposo"] .ca-codo--a  {transform:rotate(-58deg)}
.ca[data-fase="reposo"] .ca-codo--b  {transform:rotate(-52deg)}
.ca[data-fase="reposo"] .ca-cabeza   {transform:rotate(6deg)}
.ca[data-fase="reposo"] .ca-cuerpo   {animation:ca-respira 4s ease-in-out infinite}
@keyframes ca-respira{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}

/* Te mira escribir */
.ca[data-fase="mira"] .ca-hombro--a{transform:rotate(-52deg)}
.ca[data-fase="mira"] .ca-hombro--b{transform:rotate(-26deg)}
.ca[data-fase="mira"] .ca-codo--a  {transform:rotate(-46deg)}
.ca[data-fase="mira"] .ca-codo--b  {transform:rotate(-60deg)}
.ca[data-fase="mira"] .ca-torso    {transform:rotate(-7deg) translateY(3px)}
.ca[data-fase="mira"] .ca-cabeza   {transform:rotate(11deg) translateY(2px)}
.ca[data-fase="mira"] .ca-ceja     {transform:translateY(-2.5px)}

/* Marca un pliegue: aprieta con la palma */
.ca[data-fase="marca"] .ca-hombro--a{transform:rotate(-64deg)}
.ca[data-fase="marca"] .ca-codo--a  {transform:rotate(-30deg)}
.ca[data-fase="marca"] .ca-torso    {transform:rotate(-11deg) translateY(5px)}
.ca[data-fase="marca"] .ca-cabeza   {transform:rotate(14deg)}

/* Dobla rápido */
.ca[data-fase="dobla"] .ca-torso    {animation:ca-mece .38s ease-in-out infinite alternate}
.ca[data-fase="dobla"] .ca-codo--a  {animation:ca-dobla-a .3s ease-in-out infinite alternate}
.ca[data-fase="dobla"] .ca-codo--b  {animation:ca-dobla-b .3s ease-in-out infinite alternate}
.ca[data-fase="dobla"] .ca-hombro--a{transform:rotate(-58deg)}
.ca[data-fase="dobla"] .ca-hombro--b{transform:rotate(-54deg)}
.ca[data-fase="dobla"] .ca-cabeza   {transform:rotate(13deg)}
@keyframes ca-mece{from{transform:rotate(-6deg)}to{transform:rotate(-12deg) translateY(4px)}}
@keyframes ca-dobla-a{from{transform:rotate(-46deg)}to{transform:rotate(-24deg)}}
@keyframes ca-dobla-b{from{transform:rotate(-26deg)}to{transform:rotate(-48deg)}}

/* Se levanta y toma impulso */
.ca[data-fase="impulso"] .ca-artista {transform:translateY(-46px)}
.ca[data-fase="impulso"] .ca-muslo   {transform:rotate(-64deg)}
.ca[data-fase="impulso"] .ca-tibia   {transform:rotate(52deg)}
.ca[data-fase="impulso"] .ca-hombro--a{transform:rotate(52deg)}
.ca[data-fase="impulso"] .ca-codo--a {transform:rotate(-72deg)}
.ca[data-fase="impulso"] .ca-hombro--b{transform:rotate(18deg)}
.ca[data-fase="impulso"] .ca-torso   {transform:rotate(8deg)}
.ca[data-fase="impulso"] .ca-cabeza  {transform:rotate(-4deg)}

/* Lanza */
.ca[data-fase="lanza"] .ca-artista {transform:translateY(-46px)}
.ca[data-fase="lanza"] .ca-muslo   {transform:rotate(-70deg)}
.ca[data-fase="lanza"] .ca-tibia   {transform:rotate(46deg)}
.ca[data-fase="lanza"] .ca-hombro--a{transform:rotate(-128deg)}
.ca[data-fase="lanza"] .ca-codo--a {transform:rotate(-16deg)}
.ca[data-fase="lanza"] .ca-hombro--b{transform:rotate(-40deg)}
.ca[data-fase="lanza"] .ca-torso   {transform:rotate(-9deg)}
.ca[data-fase="lanza"] .ca-cabeza  {transform:rotate(-14deg) translateY(-3px)}
.ca[data-fase="lanza"] .ca-ceja    {transform:translateY(-3px)}

/* Parpadeo con ritmo irregular, disparado por JS */
.ca-parpado{transform-box:view-box;transform-origin:120px 148px;transform:scaleY(0)}
.ca-parpado.is-cierra{animation:ca-parpadeo .17s ease-in-out}
.ca-parpado.is-doble {animation:ca-parpadeo-doble .42s ease-in-out}
@keyframes ca-parpadeo{0%,100%{transform:scaleY(0)}45%,60%{transform:scaleY(1)}}
@keyframes ca-parpadeo-doble{
  0%,100%{transform:scaleY(0)} 16%,26%{transform:scaleY(1)}
  40%{transform:scaleY(0)} 56%,66%{transform:scaleY(1)}
}
.ca-ceja{transition:transform .4s ease}
.ca-boca{transition:d .35s ease}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .ca-artista{width:158px;margin-left:-38px}
}
@media (max-width:660px){
  .ca{padding:30px 16px 34px}
  .ca-piso{flex-direction:column;align-items:center}
  .ca-artista{order:-1;width:132px;margin:0 12px -18px auto;align-self:flex-end}
  .ca-hoja-env{flex:1 1 auto;width:100%}
  .ca-hoja{padding:22px 20px 18px}
  .ca-escrito{font-size:21px}
}

/* Solo apaga el movimiento dentro del componente, no en toda la página */
@media (prefers-reduced-motion:reduce){
  .ca,.ca *,.ca *::before,.ca *::after{animation:none !important;transition:none !important}
}