/* ================================================================
   1) VARIABLES GLOBALES DE ESTILO
   Hay 2 grupos bien separados:
   - Variables de la INTERFAZ del sitio (--ui-...), que definen la
     estética "glassmorphism" de toda la web (formulario, botones, etc.)
   - Variables de los CV (--cv-..., --color-acento-cv3, --clasico-...),
     que quedan intactas para que el documento final siga viéndose
     como un CV normal, imprimible, en blanco y negro/con su color.
   Cambiá los valores de acá arriba para ajustar la paleta de toda la web.
================================================================ */
:root{
  /* ---- Interfaz del sitio (diamond crystal glassmorphism, oficina premium) ---- */
  --ui-bg-deep:#0d0f14;
  --ui-bg-mid:#161a22;
  /* Glass con mayor opacidad para el efecto cristal diamante */
  --ui-glass:rgba(220,225,240,.07);
  --ui-glass-fuerte:rgba(220,225,240,.13);
  --ui-glass-borde:rgba(200,210,240,.18);
  --ui-glass-borde-fuerte:rgba(160,195,255,.60);
  /* Bordes prismáticos del diamante: degradé iridiscente */
  --ui-diamond-borde:rgba(180,200,255,.35);
  --ui-diamond-borde-hover:rgba(160,195,255,.65);
  --ui-diamond-shimmer:rgba(255,255,255,.55);
  --ui-diamond-reflection:rgba(140,180,255,.12);
  --ui-texto:#EDEFF3;
  --ui-texto-suave:#9A9FAE;
  --ui-acento:#7C93EB;           /* Azul-índigo apagado, el acento principal de la web */
  --ui-acento-fuerte:#5A73D6;
  --ui-acento-suave:rgba(124,147,235,.16);
  --ui-radio:20px;
  --fuente-ui:'Plus Jakarta Sans','Segoe UI',Tahoma,Arial,sans-serif;

  /* ---- Variables de los CV (NO tocar el look glass de estas) ---- */
  --cv-texto:#1f2937;
  --cv-texto-suave:#6b7280;
  --cv-borde:#e5e7eb;
  --color-acento-cv3:#1E3A5F;    /* Azul del CV con foto (Corporativo), elegible por el usuario */
  --fuente-cv-base:'Segoe UI', Tahoma, Arial, sans-serif;   /* Fuente neutral por defecto del CV Corporativo */
  --fuente-cv-ats:Arial, Helvetica, sans-serif;              /* Fuente exigida para el CV ATS */
  --clasico-gris:#374151;
  --clasico-gris-suave:#f3f4f6;
}

*{box-sizing:border-box;}
html{background:var(--ui-bg-deep);}
body{
  margin:0;
  min-height:100vh;
  color:var(--ui-texto);
  font-family:var(--fuente-ui);
  -webkit-font-smoothing:antialiased;
  /* Fondo más profundo y oscuro para que el cristal contraste mejor */
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(60,80,160,.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 80%, rgba(40,60,120,.14) 0%, transparent 60%),
    linear-gradient(175deg, var(--ui-bg-deep) 0%, #12141c 40%, var(--ui-bg-mid) 70%, #0e1018 100%);
  background-attachment:fixed;
}
/* Textura de grano más pronunciada, refuerza el aspecto de material físico */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Vignette sutil en los bordes, da profundidad y encuadra el contenido */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.40) 100%);
}
#app{position:relative;z-index:4;}



/* ---- Botón "Colaborar con el proyecto" flotante, esquina superior izquierda,
   con un destello periódico (como un brillo de diamante) y un resplandor suave.
   Grande y llamativo, pero sin animación constante/molesta. ---- */
.btn-donar{
  position:fixed;top:20px;left:20px;z-index:60;
  display:flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:999px;border:none;
  background:linear-gradient(135deg, rgba(124,147,235,.22), var(--ui-glass-fuerte));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(148,178,255,.4);
  color:var(--ui-texto);font-family:var(--fuente-ui);font-weight:700;font-size:1rem;
  cursor:pointer;transition:transform .2s, border-color .2s;
  box-shadow:0 10px 25px -12px rgba(0,0,0,.55);
  overflow:hidden;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  animation:brilloDonarPulso 4.5s ease-in-out infinite;
}
.btn-donar:hover{border-color:rgba(148,178,255,.75);transform:translateY(-2px) translateZ(0);}
.btn-donar svg{width:20px;height:20px;flex-shrink:0;fill:#9FD9E8;filter:drop-shadow(0 0 4px rgba(159,217,232,.7));}
/* Destello que cruza el botón cada pocos segundos, como el brillo de una piedra preciosa */
.btn-donar::after{
  content:"";position:absolute;top:0;left:-60%;width:35%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  animation:brilloDonarDestello 4.5s ease-in-out infinite;
}
@keyframes brilloDonarDestello{
  0%,15%{left:-60%;}
  40%,100%{left:140%;}
}
@keyframes brilloDonarPulso{
  0%,100%{box-shadow:0 10px 25px -12px rgba(0,0,0,.55), 0 0 0 rgba(124,147,235,0);}
  50%{box-shadow:0 10px 25px -12px rgba(0,0,0,.55), 0 0 22px rgba(124,147,235,.5);}
}
@media(prefers-reduced-motion:reduce){
  .btn-donar,.btn-donar::after{animation:none;}
}

/* ================================================================
   CANVAS DE FONDO — Animación nativa (partículas + rayos de luz).
   Posicionado fijo detrás de todo el contenido. Sin dependencias.
   100% compatible: Chrome, Firefox, Safari, Edge, iOS, Android.
================================================================ */
#canvas-fondo{
  position:fixed;inset:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
  display:block;
}
/* Jerarquía z-index: canvas(0) → fondo-animado(3) → contenido(4+) */
#fondo-animado{z-index:3;}
#app{z-index:4;}
.btn-donar{z-index:60;}
.modal-overlay{z-index:998;}
#overlay-carga{z-index:999;}


/* ================================================================
   FONDO ANIMADO — Oficina Premium con efecto cristal diamante.
   5 luces de colores del espectro prismático (azul, índigo, cian,
   violeta, dorado cálido) que se mueven lentamente evocando el
   reflejo de un diamante bajo luz de oficina. La persiana aporta
   las rayas diagonales de luz. Opacidad calibrada para que el fondo
   sea VISIBLE pero nunca opaque el contenido.
================================================================ */
#fondo-animado{
  position:fixed;inset:0;overflow:hidden;pointer-events:none;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}

#fondo-animado .luz{
  position:absolute;border-radius:50%;filter:blur(80px);
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}

/* Luz 1: azul índigo profundo — esquina superior izquierda */
#fondo-animado .luz-1{
  width:62vw;height:62vw;left:-18%;top:-20%;
  background:radial-gradient(circle, rgba(100,140,255,.32) 0%, rgba(80,110,220,.14) 45%, transparent 70%);
  animation:derivarLuz1 36s ease-in-out infinite;
}
/* Luz 2: dorado cálido de lámpara de oficina — derecha */
#fondo-animado .luz-2{
  width:50vw;height:50vw;right:-14%;top:10%;
  background:radial-gradient(circle, rgba(220,190,120,.22) 0%, rgba(200,165,90,.10) 45%, transparent 70%);
  animation:derivarLuz2 44s ease-in-out infinite;
}
/* Luz 3: cian helado — inferior centro (reflejo de ventana) */
#fondo-animado .luz-3{
  width:65vw;height:65vw;left:12%;bottom:-30%;
  background:radial-gradient(circle, rgba(80,200,230,.18) 0%, rgba(60,160,200,.08) 45%, transparent 70%);
  animation:derivarLuz3 50s ease-in-out infinite;
}
/* Luz 4 (nueva): violeta / prisma — centro-derecha, más pequeña y nítida */
#fondo-animado .luz-4{
  width:36vw;height:36vw;right:8%;bottom:15%;
  background:radial-gradient(circle, rgba(160,100,240,.20) 0%, rgba(130,80,210,.08) 45%, transparent 70%);
  animation:derivarLuz4 58s ease-in-out infinite;
}
/* Luz 5 (nueva): blanco cristal — disparo de reflejo tipo diamante, small y brillante */
#fondo-animado .luz-5{
  width:20vw;height:20vw;left:38%;top:28%;
  background:radial-gradient(circle, rgba(220,235,255,.18) 0%, rgba(200,215,255,.06) 50%, transparent 70%);
  animation:derivarLuz5 28s ease-in-out infinite;
}

/* Persiana de oficina: franjas diagonales más visibles que cruzan la pantalla */
#fondo-animado .persiana{
  position:absolute;inset:-20% -30%;
  background:repeating-linear-gradient(
    105deg,
    transparent 0,
    transparent 75px,
    rgba(255,255,255,.048) 75px,
    rgba(255,255,255,.048) 115px,
    transparent 115px,
    transparent 155px,
    rgba(200,220,255,.022) 155px,
    rgba(200,220,255,.022) 175px
  );
  animation:derivarPersiana 55s linear infinite;
}

/* Segundo overlay de persiana con ángulo diferente para simular geometría diamante */
#fondo-animado .persiana::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(
    75deg,
    transparent 0,
    transparent 120px,
    rgba(150,180,255,.018) 120px,
    rgba(150,180,255,.018) 140px
  );
}

@keyframes derivarLuz1{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(4%,4.5%) scale(1.08);}
  66%{transform:translate(-2%,2%) scale(1.04);}
}
@keyframes derivarLuz2{
  0%,100%{transform:translate(0,0) scale(1);}
  40%{transform:translate(-5%,4%) scale(1.07);}
  70%{transform:translate(-2%,-2%) scale(1.03);}
}
@keyframes derivarLuz3{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(4%,-4%) scale(1.06);}
}
@keyframes derivarLuz4{
  0%,100%{transform:translate(0,0) scale(1);}
  30%{transform:translate(-6%,-5%) scale(1.10);}
  65%{transform:translate(3%,3%) scale(.96);}
}
@keyframes derivarLuz5{
  0%,100%{transform:translate(0,0) scale(1);opacity:1;}
  25%{transform:translate(-8%,-6%) scale(1.15);opacity:.7;}
  50%{transform:translate(5%,8%) scale(.85);opacity:1;}
  75%{transform:translate(4%,-4%) scale(1.10);opacity:.8;}
}
@keyframes derivarPersiana{
  0%{transform:translateX(0) skewY(.5deg);}
  50%{transform:translateX(-5%) skewY(-.3deg);}
  100%{transform:translateX(-10%) skewY(.5deg);}
}
@media(prefers-reduced-motion:reduce){
  #fondo-animado .luz, #fondo-animado .persiana{animation:none;}
}


/* ================================================================
   2) ESTRUCTURA GENERAL DE LA APP (no confundir con los CV)
================================================================ */
#app{max-width:980px;margin:0 auto;padding:32px 20px 60px;}

header.top{
  position:relative;
  /* Cristal diamante: fondo con capas de reflejo iridiscente */
  background:linear-gradient(
    160deg,
    rgba(255,255,255,.11) 0%,
    rgba(140,170,255,.08) 30%,
    rgba(220,225,240,.05) 60%,
    rgba(80,120,200,.07) 100%
  );
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(160,195,255,.28);
  box-shadow:
    0 20px 50px -16px rgba(0,0,0,.65),
    0 0 35px -10px rgba(100,140,255,.18),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(100,140,255,.10);
  border-radius:var(--ui-radio);
  padding:30px 28px;
  margin-bottom:22px;
  text-align:center;
  overflow:hidden;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}

/* Línea de brillo superior — arista brillante de diamante */
header.top::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.35) 20%,
    rgba(180,210,255,.65) 50%,
    rgba(255,255,255,.35) 80%,
    transparent 100%
  );
  z-index:1;
}

/* Destello prismático sutil que cruza el header suavemente */
header.top::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(
    120deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,.06) 48%,
    rgba(180,210,255,.09) 52%,
    transparent 60%,
    transparent 100%
  );
  animation:destelloHeader 8s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
  transform:translateZ(0);
}

@keyframes destelloHeader{
  0%,40%{transform:translateX(-100%) skewX(-12deg);opacity:0;}
  45%{opacity:1;}
  70%,100%{transform:translateX(180%) skewX(-12deg);opacity:0;}
}

@media(prefers-reduced-motion:reduce){
  header.top::after{animation:none;}
}

/* Guardar / Cargar / Borrar: botones de solo ícono en la esquina del header,
   así no le quitan protagonismo al logo centrado */
.header-acciones{position:absolute;top:18px;right:18px;display:flex;gap:6px;}
.btn-icono{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--ui-glass-borde);
  background:var(--ui-glass);color:var(--ui-texto-suave);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.btn-icono svg{width:16px;height:16px;fill:currentColor;}
.btn-icono:hover{color:var(--ui-texto);border-color:var(--ui-glass-borde-fuerte);background:var(--ui-glass-fuerte);}
.btn-icono-peligro:hover{color:#F0A5A5;border-color:rgba(240,165,165,.5);}
@media(max-width:480px){
  .header-acciones{position:static;justify-content:center;margin-bottom:12px;}
}
.logo-wrap{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px;}
.logo-rayo{
  width:40px;height:40px;flex-shrink:0;
  filter:drop-shadow(0 0 12px rgba(124,147,235,.6));
}
header.top h1{
  margin:0;font-size:2.4rem;font-weight:800;letter-spacing:.02em;
  /* Gradiente prismático: blanco → azul → índigo → violeta, como luz en un diamante */
  background:linear-gradient(
    100deg,
    #ffffff 0%,
    #d6e4ff 25%,
    var(--ui-acento) 50%,
    #a8beff 75%,
    #ffffff 100%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 0 16px rgba(124,147,235,.55));
  -webkit-filter:drop-shadow(0 0 16px rgba(124,147,235,.55));
  animation:brilloTituloPrisma 6s linear infinite;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
@keyframes brilloTituloPrisma{
  0%{background-position:0% center;}
  50%{background-position:100% center;}
  100%{background-position:0% center;}
}
@media(prefers-reduced-motion:reduce){header.top h1{animation:none;background-position:0% center;}}

header.top p{margin:0;color:var(--ui-texto-suave);font-size:.92rem;}

/* ---- Botón grande de "Preguntas frecuentes", bien visible dentro del header ---- */
.btn-faq{
  display:inline-flex;align-items:center;gap:8px;margin:16px auto 0;
  padding:11px 20px;border-radius:999px;
  background:var(--ui-glass);border:1px solid var(--ui-glass-borde);
  color:var(--ui-texto);font-family:var(--fuente-ui);font-weight:600;font-size:.88rem;
  cursor:pointer;transition:.2s;
}
.btn-faq svg{width:19px;height:19px;fill:var(--ui-acento);flex-shrink:0;}
.btn-faq:hover{border-color:var(--ui-glass-borde-fuerte);background:var(--ui-glass-fuerte);transform:translateY(-1px);}

.stepper{display:flex;gap:8px;margin-top:18px;}
.stepper .step{
  flex:1;text-align:center;padding:11px;border-radius:999px;
  background:rgba(220,225,240,.06);
  color:var(--ui-texto-suave);font-size:.85rem;font-weight:600;
  border:1px solid rgba(180,200,255,.16);transition:.2s;
}
.stepper .step.activo{
  background:linear-gradient(120deg, var(--ui-acento), var(--ui-acento-fuerte));
  color:#fff;border-color:transparent;
  box-shadow:
    0 8px 24px -8px rgba(124,147,235,.75),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 20px -6px rgba(124,147,235,.45);
  position:relative;overflow:hidden;
}
/* Destello de la pastilla activa del stepper */
.stepper .step.activo::after{
  content:"";position:absolute;top:0;left:-60%;width:30%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  animation:destelloStepActivo 3.5s ease-in-out infinite;
}
@keyframes destelloStepActivo{
  0%,20%{left:-60%;}
  60%,100%{left:140%;}
}
@media(prefers-reduced-motion:reduce){.stepper .step.activo::after{animation:none;}}


section.paso{display:none;}
section.paso.activo{display:block;}

.card{
  /* Fondo cristal diamante: capas de reflejo iridiscente */
  background:linear-gradient(
    165deg,
    rgba(255,255,255,.09) 0%,
    rgba(160,185,255,.06) 25%,
    rgba(220,225,240,.04) 55%,
    rgba(100,130,200,.05) 80%,
    rgba(220,225,240,.03) 100%
  );
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-radius:var(--ui-radio);
  padding:22px 24px;
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
  /* Borde prismático multi-capa */
  border:1px solid rgba(180,200,255,.22);
  box-shadow:
    0 16px 40px -20px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18),   /* arista superior brillante */
    inset 0 -1px 0 rgba(100,140,255,.08);   /* arista inferior azul */
  /* Aceleración por hardware para scroll fluido sin parpadeo */
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  opacity:1;
  transition:border-color .25s ease, box-shadow .25s ease;
}

/* Reflejo de arista superior — línea brillante de diamante */
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.35) 20%,
    rgba(200,220,255,.60) 50%,
    rgba(255,255,255,.35) 80%,
    transparent 100%
  );
  z-index:1;
  pointer-events:none;
}

/* Hover: borde más luminoso y mayor resplandor prismático */
.card:hover,.card:focus-within{
  border-color:rgba(160,195,255,.50);
  box-shadow:
    0 20px 48px -18px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(120,160,255,.12),
    0 0 24px -8px rgba(100,140,255,.22);
}
.card h2{margin-top:0;font-size:1.05rem;font-weight:700;color:var(--ui-texto);}
.card h2 small{display:block;font-weight:400;color:var(--ui-texto-suave);font-size:.8rem;margin-top:3px;}


/* Título destacado del paso 2: centrado, más grande y con un resplandor sutil,
   para que quede clarísimo que se está en la vista previa del CV */
.titulo-vista-previa{
  text-align:center;font-size:1.35rem!important;margin-bottom:14px!important;
  text-shadow:0 0 18px rgba(124,147,235,.65), 0 0 38px rgba(124,147,235,.35);
}
.titulo-vista-previa small{text-align:center;text-shadow:none;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr;}}

label{display:block;font-size:.82rem;font-weight:600;margin-bottom:5px;color:var(--ui-texto);}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--ui-glass-borde);border-radius:10px;
  font-family:inherit;font-size:.9rem;background:rgba(6,10,20,.35);color:var(--ui-texto);
  transition:border-color .2s, background .2s;
}
input::placeholder,textarea::placeholder{color:var(--ui-texto-suave);opacity:.7;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ui-acento);background:rgba(6,10,20,.5);box-shadow:0 0 0 3px var(--ui-acento-suave);}
select option{background:var(--ui-bg-mid);color:var(--ui-texto);}
textarea{resize:vertical;min-height:70px;overflow-wrap:break-word;word-break:break-word;}
.campo{margin-bottom:14px;}
.error-msg{color:#f87171;font-size:.78rem;margin-top:4px;display:none;}
.campo.invalido input{border-color:#f87171;}
.campo.invalido .error-msg{display:block;}

button{
  cursor:pointer;font-family:inherit;font-weight:600;border-radius:10px;border:none;
  padding:10px 16px;font-size:.88rem;transition:.18s;
}
.btn-primario{background:linear-gradient(120deg, var(--ui-acento), var(--ui-acento-fuerte));color:#fff;box-shadow:0 10px 26px -10px rgba(124,147,235,.65);border-radius:999px;padding:12px 22px;}
.btn-primario:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn-secundario{background:var(--ui-acento-suave);color:var(--ui-texto);border:1px solid var(--ui-glass-borde);border-radius:999px;}
.btn-secundario:hover{background:rgba(124,147,235,.24);}
.btn-ghost{background:transparent;color:var(--ui-texto-suave);border:1px solid var(--ui-glass-borde);}
.btn-ghost:hover{background:var(--ui-glass);color:var(--ui-texto);}
.btn-quitar{background:rgba(248,113,113,.16);color:#fca5a5;padding:6px 10px;font-size:.78rem;}

.item-repetible{
  border:1px dashed var(--ui-glass-borde);border-radius:12px;padding:14px;margin-bottom:12px;position:relative;background:rgba(255,255,255,.03);
}
.item-repetible .quitar-fila{position:absolute;top:10px;right:10px;}

.tags-wrap{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.tag{
  background:var(--ui-acento-suave);color:var(--ui-texto);padding:6px 12px;border-radius:999px;
  font-size:.82rem;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-glass-borde);
}
.tag button{background:none;border:none;color:var(--ui-acento);font-weight:700;cursor:pointer;padding:0;font-size:.9rem;}
.sugerencias{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.sugerencia-btn{background:transparent;border:1px dashed var(--ui-acento);color:var(--ui-acento);padding:5px 10px;font-size:.78rem;border-radius:999px;}

.form-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:6px;}
.form-actions .izq,.form-actions .der{display:flex;gap:10px;flex-wrap:wrap;}
.botones-descarga{display:flex;flex-wrap:wrap;gap:10px;}

/* ---- Carga de foto (input type=file + preview) ---- */
.foto-upload-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.foto-preview{width:60px;height:60px;border-radius:50%;object-fit:cover;border:1px solid var(--ui-glass-borde);background:var(--ui-glass);display:none;}
.foto-preview.activa{display:block;}

/* ---- Grupos de radios (Estilo del CV / Diseño a descargar) ---- */
.opciones-radio{display:flex;flex-wrap:wrap;gap:12px;}
.opciones-radio label{
  display:flex;align-items:center;gap:8px;border:1px solid var(--ui-glass-borde);border-radius:10px;
  padding:10px 14px;font-size:.88rem;font-weight:500;cursor:pointer;color:var(--ui-texto);background:var(--ui-glass);
}
.opciones-radio input[type=radio]{accent-color:var(--ui-acento);width:16px;height:16px;}

/* ---- Checkbox "no deseo agregar QR" ---- */
.checkbox-linea{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:.88rem;}
.checkbox-linea input{width:16px;height:16px;accent-color:var(--ui-acento);}

/* ---- Switch / toggle moderno (reemplaza el checkbox nativo visualmente,
   sin cambiar su comportamiento: sigue siendo un <input type="checkbox">) ---- */
.switch-toggle{
  -webkit-appearance:none;appearance:none;margin:0;
  width:42px;height:24px;min-width:42px;border-radius:999px;
  background:var(--ui-glass-fuerte);border:1px solid var(--ui-glass-borde);
  position:relative;cursor:pointer;
  transition:background .2s, border-color .2s;
}
.switch-toggle::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.switch-toggle:checked{background:linear-gradient(120deg, var(--ui-acento), var(--ui-acento-fuerte));border-color:transparent;}
.switch-toggle:checked::after{transform:translateX(18px);}
.switch-toggle:disabled{opacity:.5;cursor:not-allowed;}
.campo-deshabilitado{opacity:.5;pointer-events:none;}


/* ---- Paleta de colores (swatches circulares seleccionables) ---- */
.paleta-opciones{display:flex;flex-wrap:wrap;gap:10px;}
.paleta-swatch{
  width:34px;height:34px;border-radius:50%;background:var(--swatch-color);cursor:pointer;
  display:block;position:relative;border:2px solid rgba(255,255,255,.5);box-shadow:0 0 0 1px var(--ui-glass-borde);
}
.paleta-swatch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.paleta-swatch:has(input:checked){box-shadow:0 0 0 2px var(--ui-bg-mid), 0 0 0 4px var(--swatch-color);}

/* ---- Panel de personalización en tiempo real dentro de la vista previa (paso 2) ---- */
.control-personalizacion-paso2{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.control-color-paso2{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--ui-glass);border:1px solid var(--ui-glass-borde);border-radius:12px;
  padding:10px 14px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.control-color-label{font-size:.82rem;font-weight:600;color:var(--ui-texto);}
.mini-opciones-fuente{display:flex;gap:8px;flex-wrap:wrap;}
.mini-fuente-btn{
  border:1px solid var(--ui-glass-borde);background:rgba(6,10,20,.3);border-radius:8px;padding:5px 10px;
  font-size:.78rem;cursor:pointer;color:var(--ui-texto);
}
.mini-fuente-btn.activa{border-color:var(--ui-acento);background:var(--ui-acento-suave);color:#fff;font-weight:600;}

/* ================================================================
   3) VISTA PREVIA (paso 2)
================================================================ */
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.tab-btn{background:var(--ui-glass);border:1px solid var(--ui-glass-borde);color:var(--ui-texto-suave);border-radius:999px;}
.tab-btn.activa{background:linear-gradient(120deg, var(--ui-acento), var(--ui-acento-fuerte));color:#fff;border-color:transparent;box-shadow:0 8px 20px -10px rgba(124,147,235,.7);}

/* ---- Alerta de tamaño A4 (paso 2) ---- */
.alerta-a4{
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.45);color:#fcd9a8;
  padding:14px 18px;border-radius:var(--ui-radio);margin-bottom:16px;font-size:.85rem;line-height:1.6;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.alerta-a4 ul{margin:8px 0 0;padding-left:18px;}

/* ---- Tarjeta de consejos (paso 2) ---- */
.card-consejos{background:linear-gradient(165deg, rgba(52,211,153,.09), var(--ui-glass));}
.lista-consejos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.lista-consejos li{
  display:flex;align-items:flex-start;gap:10px;font-size:.86rem;line-height:1.5;color:var(--ui-texto);
  padding:10px 12px;border-radius:10px;background:var(--ui-glass);border:1px solid var(--ui-glass-borde);
}
.lista-consejos li.dinamico{border-color:rgba(124,147,235,.4);background:var(--ui-acento-suave);}
.lista-consejos .icono-consejo{flex-shrink:0;font-size:1rem;line-height:1.4;}
.lista-consejos strong{color:var(--ui-texto);}

.preview-scroll{
  background:rgba(6,10,20,.35);padding:24px;border-radius:var(--ui-radio);overflow:auto;
  border:1px solid var(--ui-glass-borde);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;
}
.preview-scroll::-webkit-scrollbar{height:8px;}

/* Hoja A4 base: todas las plantillas parten de este tamaño */
.cv-page{
  width:210mm;min-height:297mm;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.15);
  position:relative;flex-shrink:0;margin:0 auto;box-sizing:border-box;
}
/* Evita que un texto sin espacios (o muy largo) se salga de su recuadro:
   fuerza el corte de palabra para que siempre encaje en el ancho disponible */
.cv-page, .cv-page *{box-sizing:border-box;overflow-wrap:break-word;word-break:break-word;}
/* Las hojas no activas se sacan de la vista pero SIGUEN en el DOM
   (necesario para que html2canvas pueda capturarlas al generar el zip) */
.cv-page{display:none;}
.cv-page.activa{display:block;}
/* El corporativo ya no necesita flex a nivel de página completa: el encabezado
   (foto + franja) va en bloque y las 2 columnas viven adentro de .cv-corp-cuerpo */
.cv-page.cv-corporativo.activa{display:block;}

/* ---- CV 1: ATS (solo texto, sin color, Arial) ---- */
.cv-ats{font-family:var(--fuente-cv-ats);font-size:11pt;color:#000;padding:18mm 16mm;line-height:1.5;}
.cv-ats h1{font-size:22pt;margin:0 0 6px;letter-spacing:.5px;text-transform:uppercase;text-align:center;color:#000;}
.cv-ats .puesto-ats{font-size:11pt;margin:0 0 4px;text-align:center;font-weight:bold;color:#000;}
.cv-ats .contacto-ats{font-size:10pt;margin:0 0 14px;color:#000;font-weight:bold;display:flex;flex-wrap:wrap;justify-content:center;row-gap:2px;}
.cv-ats .contacto-ats span{white-space:nowrap;}
.cv-ats .contacto-ats span:not(:last-child)::after{content:" | ";white-space:pre;}
.cv-ats .resumen-ats{font-size:10.5pt;text-align:justify;margin:0 0 16px;color:#000;}
.cv-ats h2{font-size:11.5pt;text-transform:uppercase;margin:16px 0 8px;letter-spacing:.5px;font-weight:bold;color:#000;}
.cv-ats p, .cv-ats li{font-size:10.5pt;margin:2px 0;}
.cv-ats ul{margin:4px 0 10px;padding-left:18px;}
.cv-ats .exp-item{margin-bottom:10px;}
.cv-ats .exp-titulo{font-weight:bold;color:#000;}
.cv-ats .edu-item{margin-bottom:10px;}
.cv-ats .edu-institucion{font-weight:bold;color:#000;}
.cv-ats .edu-carrera{font-style:italic;color:#000;}

/* ---- CV 2: Corporativo con foto — encabezado con foto + franja diagonal,
   cuerpo en 2 columnas debajo (rediseñado a partir de la referencia del cliente) ---- */
.cv-corporativo{font-family:var(--fuente-cv-base);color:var(--cv-texto);}

/* Encabezado: foto a la izquierda (reducida 30%), franja recta vertical (reducida 30%), nombre a la derecha */
.cv-corp-header{position:relative;height:48mm;overflow:hidden;background:#fff;}
.cv-corp-foto-wrap{position:absolute;left:0;top:0;width:28%;height:100%;overflow:hidden;background:#dbe3ec;}
.cv-corp-foto-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.cv-corp-foto-wrap .foto-inicial-grande{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:24pt;font-weight:700;color:#fff;background:var(--color-acento-cv3);
}
/* Franja decorativa recta vertical (sin inclinación, reducida un 30% al igual que la foto) */
.cv-corp-franja{
  position:absolute;top:0;left:28%;width:8%;height:100%;
  background:var(--color-acento-cv3);z-index:2;
}
.cv-corp-nombre-wrap{
  position:absolute;left:39%;right:5%;top:0;height:100%;
  display:flex;flex-direction:column;justify-content:center;text-align:left;z-index:3;
}
.cv-corp-nombre-wrap h1{margin:0;font-size:23pt;line-height:1.15;color:var(--color-acento-cv3);}
.cv-corp-nombre-wrap .profesion{margin:6px 0 0;font-size:11.5pt;letter-spacing:2px;color:var(--color-acento-cv3);text-transform:uppercase;font-weight:600;}

/* Cuerpo en 2 columnas debajo del encabezado, con una línea vertical que las separa */
.cv-corp-cuerpo{display:flex;padding:10mm 14mm 14mm;}
.cv-corp-col-izq{width:36%;padding-right:10mm;}
.cv-corp-col-der{width:64%;padding-left:10mm;border-left:1px solid var(--cv-borde);}
.cv-corporativo h2{
  font-size:12pt;text-transform:uppercase;letter-spacing:1px;color:var(--color-acento-cv3);
  border-bottom:2px solid var(--color-acento-cv3);padding-bottom:4px;margin:0 0 10px;
  display:inline-block;
}
.cv-corporativo .bloque{margin-bottom:20px;}
.cv-corporativo .bloque:last-child{margin-bottom:0;}
.cv-corporativo p, .cv-corporativo li{font-size:9.6pt;line-height:1.5;}
.cv-corp-contacto-item{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:9.6pt;word-break:break-word;}
.cv-corp-contacto-icono{
  width:20px;height:20px;min-width:20px;border-radius:50%;background:var(--color-acento-cv3);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10px;
  font-weight:800;letter-spacing:-.3px;text-transform:uppercase;flex-shrink:0;
}
.cv-corp-contacto-icono.whatsapp{background:#25D366;}
.cv-corp-contacto-icono.email{background:#4285F4;}
.cv-corp-contacto-icono.ubicacion{background:#EA4335;}
.cv-corp-contacto-icono.link{background:#7C3AED;}
.cv-corp-contacto-icono svg{width:11px;height:11px;display:block;}
.cv-corp-col-izq ul{margin:0;padding-left:16px;}
.cv-corp-edu-item{margin-bottom:10px;}
.cv-corp-edu-item:last-child{margin-bottom:0;}
.cv-corp-edu-institucion{font-weight:700;}
.cv-corp-edu-carrera{font-style:italic;color:var(--cv-texto-suave);}
.cv-corp-qr-item{text-align:left;margin-top:6px;}
.cv-corp-qr-item img{width:44mm;height:44mm;}
.cv-corp-qr-item span{display:block;font-size:8pt;color:var(--cv-texto-suave);margin-top:3px;}
.cv-corporativo .exp-item{margin-bottom:12px;}
.cv-corporativo .exp-header{display:flex;justify-content:space-between;font-weight:700;font-size:10.5pt;}
.cv-corporativo .exp-empresa{color:var(--cv-texto-suave);font-size:9.5pt;margin:1px 0 4px;}
.cv-corp-col-der ul{margin:4px 0;padding-left:16px;font-size:9.6pt;}

@media(max-width:640px){
  .preview-scroll{padding:10px;}
}

/* ================================================================
   ESTILO "CLÁSICO": se activa agregando la clase .clasico a la
   hoja del CV Corporativo. Anula los colores de acento y deja
   todo en escala de grises.
================================================================ */
.cv-page.clasico.cv-corporativo .cv-corp-franja{background:var(--clasico-gris)!important;}
.cv-page.clasico.cv-corporativo .cv-corp-foto-wrap .foto-inicial-grande{background:var(--clasico-gris)!important;}
.cv-page.clasico.cv-corporativo .cv-corp-nombre-wrap h1,
.cv-page.clasico.cv-corporativo .cv-corp-nombre-wrap .profesion,
.cv-page.clasico.cv-corporativo h2{color:var(--clasico-gris)!important;border-color:var(--clasico-gris)!important;}
.cv-page.clasico.cv-corporativo .cv-corp-contacto-icono{background:var(--clasico-gris)!important;}

/* ================================================================
   FUENTE ELEGIDA POR EL USUARIO: se aplica a toda la hoja del CV
   (título, párrafos, listas, etc.) sin importar el diseño elegido.
   Si el navegador o el sistema no tiene instalada esa fuente,
   cae automáticamente en la alternativa más parecida (fallback).
================================================================ */
.cv-page.fuente-georgia, .cv-page.fuente-georgia *{font-family:Georgia,'Cambria','Times New Roman',serif!important;}
.cv-page.fuente-sans, .cv-page.fuente-sans *{font-family:Arial,Helvetica,sans-serif!important;}
.cv-page.fuente-times, .cv-page.fuente-times *{font-family:'Times New Roman',Times,serif!important;}

/* Botón de Generar con IA */
.btn-ia{
  background:linear-gradient(135deg, rgba(124,147,235,.22), rgba(168,85,247,.28));
  border:1px solid rgba(168,85,247,.45);
  color:#e0e7ff;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s ease;
  font-size:.82rem;
}
.btn-ia:hover{
  background:linear-gradient(135deg, rgba(124,147,235,.38), rgba(168,85,247,.45));
  border-color:rgba(192,132,252,.75);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 0 16px rgba(168,85,247,.35);
}
.btn-ia:active{
  transform:translateY(0);
}

/* ================================================================
   DOCUMENTO 3: CARTA DE PRESENTACIÓN (formato formal institucional)
   Márgenes y espaciados estandarizados de correspondencia profesional:
   24mm de margen lateral seguro para que NINGUNA impresora corte texto,
   flujo continuo sin huecos en blanco artificiales, strictly 1 carilla A4.
================================================================ */
.carta-presentacion{
  font-family:var(--fuente-cv-base);
  color:#111827;
  width:210mm;
  min-height:297mm;
  padding:22mm 24mm 20mm 24mm; /* 24mm a los laterales = 2.4cm seguros para impresión */
  line-height:1.55;
  box-sizing:border-box;
}
.carta-header{
  text-align:center;
  border-bottom:1.5px solid #111827;
  padding-bottom:10px;
  margin-bottom:16px;
}
.carta-nombre{
  font-size:18pt;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  margin:0 0 4px;
  color:#111827;
}
.carta-profesion{
  font-size:11pt;
  font-weight:700;
  margin:0 0 5px;
  color:#1f2937;
}
.carta-contacto{
  font-size:9.5pt;
  color:#4b5563;
  margin:0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
}
.carta-contacto span:not(:last-child)::after{
  content:" |";
  margin-left:6px;
  color:#9ca3af;
}
.carta-fecha{
  text-align:right;
  font-size:10pt;
  color:#374151;
  margin-bottom:16px;
}
.carta-destinatario{
  font-size:10.5pt;
  font-weight:700;
  color:#111827;
  margin-bottom:14px;
}
.carta-cuerpo{
  font-size:10pt;
  line-height:1.55;
  color:#1f2937;
  word-break:normal;
  overflow-wrap:break-word;
}
.carta-cuerpo p{
  margin:0 0 12px;
  text-align:justify;
  text-justify:inter-word;
  word-break:normal;
}
.carta-cuerpo p:last-child{
  margin-bottom:0;
}
.carta-despedida{
  margin-top:18px;
  margin-bottom:20px;
  font-size:10pt;
  color:#111827;
}
.carta-firma{
  font-size:10pt;
  line-height:1.45;
}
.carta-firma-nombre{
  font-weight:700;
  font-size:11pt;
  color:#111827;
}
.carta-firma-profesion{
  color:#374151;
  margin:2px 0;
}
.carta-firma-contacto{
  font-size:9pt;
  color:#6b7280;
}

/* Overlay de carga durante la generación de los PDF */
#overlay-carga{
  position:fixed;inset:0;background:rgba(17,24,39,.75);display:none;
  align-items:center;justify-content:center;z-index:999;color:#fff;font-size:1rem;flex-direction:column;gap:10px;
}
#overlay-carga.activo{display:flex;}
.spinner{width:38px;height:38px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:girar 1s linear infinite;}
@keyframes girar{to{transform:rotate(360deg);}}

/* Contenedor invisible donde se dibujan temporalmente los QR antes de convertirlos en imagen */
#qr-temp{position:absolute;left:-9999px;top:-9999px;}

/* ================================================================
   EDITOR DE FOTO (recorte + zoom + difuminado de fondo)
================================================================ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(4,6,16,.78);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  z-index:998;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal-editor-foto-caja{
  background:linear-gradient(
    165deg,
    rgba(255,255,255,.11) 0%,
    rgba(140,170,255,.08) 30%,
    rgba(220,225,240,.05) 70%,
    rgba(80,110,200,.07) 100%
  );
  backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%);
  border:1px solid rgba(180,200,255,.25);
  border-radius:var(--ui-radio);padding:22px;max-width:380px;width:100%;
  max-height:92vh;overflow:auto;
  box-shadow:
    0 30px 80px -16px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(100,140,255,.09),
    0 0 0 0.5px rgba(255,255,255,.06);
  color:var(--ui-texto);
}
.modal-editor-foto-caja h3{margin:0 0 4px;font-size:1.05rem;color:var(--ui-texto);}
.editor-foto-ayuda{color:var(--ui-texto-suave);font-size:.8rem;margin:0 0 14px;}

/* ================================================================
   MODAL "COLABORAR CON EL PROYECTO" (alias + redes/comunidad)
================================================================ */
.modal-colaborar-caja{
  position:relative;
  background:linear-gradient(
    145deg,
    rgba(255,255,255,.12) 0%,
    rgba(124,147,235,.10) 25%,
    rgba(180,200,255,.07) 55%,
    rgba(100,130,220,.08) 80%,
    rgba(200,215,255,.05) 100%
  );
  backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%);
  border:1px solid rgba(160,195,255,.30);
  border-radius:var(--ui-radio);
  padding:28px;max-width:440px;width:100%;max-height:92vh;overflow:auto;
  box-shadow:
    0 30px 90px -16px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(120,160,255,.10),
    0 0 0 0.5px rgba(255,255,255,.06),
    0 0 40px -15px rgba(100,140,255,.18);
  color:var(--ui-texto);text-align:center;
}

.modal-cerrar{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  background:var(--ui-glass);border:1px solid var(--ui-glass-borde);color:var(--ui-texto-suave);
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;font-size:.9rem;
}
.modal-cerrar:hover{color:var(--ui-texto);border-color:var(--ui-glass-borde-fuerte);}
.colaborar-icono{font-size:2.4rem;margin-bottom:6px;}
.modal-colaborar-caja h3{margin:0 0 10px;font-size:1.2rem;}
.colaborar-texto{color:var(--ui-texto-suave);font-size:.9rem;line-height:1.55;margin:0 0 18px;}
.colaborar-texto strong{color:var(--ui-texto);}

.alias-caja{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(148,178,255,.3);border-radius:14px;
  padding:14px 16px;margin-bottom:18px;text-align:left;
}
.alias-datos{display:flex;flex-direction:column;gap:2px;}
.alias-valor{font-size:1.15rem;font-weight:800;letter-spacing:.02em;color:var(--ui-texto);}
.alias-meta{font-size:.72rem;color:var(--ui-texto-suave);}
.btn-copiar-alias{
  display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;flex-shrink:0;
  background:linear-gradient(120deg, var(--ui-acento), var(--ui-acento-fuerte));color:#fff;
  border:none;font-weight:700;font-size:.82rem;cursor:pointer;transition:.2s;
}
.btn-copiar-alias:hover{filter:brightness(1.1);}
.btn-copiar-alias svg{width:14px;height:14px;fill:currentColor;}
.btn-copiar-alias.copiado{background:linear-gradient(120deg, #34D399, #10B981);}

.comunidad-caja{
  text-align:left;background:var(--ui-glass);border:1px solid var(--ui-glass-borde);
  border-radius:14px;padding:14px 16px;
}
.comunidad-caja p{margin:0;font-size:.82rem;color:var(--ui-texto-suave);line-height:1.55;}
.comunidad-caja p + p{margin-top:10px;}
.comunidad-caja a{color:#9FD9E8;font-weight:700;text-decoration:underline;}
.comunidad-caja .proximamente strong{color:var(--ui-texto);}

/* ---- Modal de Preguntas Frecuentes (acordeón) ---- */
.modal-faq-caja{max-width:520px;text-align:center;}
.modal-faq-caja .colaborar-texto{margin-bottom:16px;}
.faq-lista{display:flex;flex-direction:column;gap:8px;text-align:left;}
.faq-item{
  background:var(--ui-glass);border:1px solid var(--ui-glass-borde);
  border-radius:12px;overflow:hidden;
}
.faq-pregunta{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:none;color:var(--ui-texto);font-weight:600;font-size:.86rem;
  padding:13px 14px;cursor:pointer;text-align:left;font-family:var(--fuente-ui);
}
.faq-flecha{transition:transform .2s;color:var(--ui-texto-suave);flex-shrink:0;font-size:.8rem;}
.faq-flecha.rotada{transform:rotate(180deg);}
.faq-respuesta{
  max-height:0;overflow:hidden;transition:max-height .3s ease, padding .3s ease;
  padding:0 14px;font-size:.82rem;color:var(--ui-texto-suave);line-height:1.55;
}
.faq-respuesta.abierta{max-height:320px;padding:0 14px 14px;}
.editor-foto-viewport{
  width:100%;aspect-ratio:1/1;max-width:320px;margin:0 auto 16px;border-radius:12px;
  overflow:hidden;border:1px solid var(--ui-glass-borde);background:rgba(6,10,20,.4);cursor:grab;touch-action:none;
}
.editor-foto-viewport:active{cursor:grabbing;}
.editor-foto-viewport canvas{width:100%;height:100%;display:block;}
.editor-foto-controles label{font-size:.8rem;color:var(--ui-texto);}

/* ================================================================
   FOOTER DEL SITIO (no confundir con el contenido de los CV).
   Para cambiar el texto o el nombre, editá el <footer> en el HTML.
================================================================ */
footer.site-footer{
  text-align:center;
  color:var(--ui-texto-suave);
  font-size:.8rem;
  padding:22px 10px 8px;
  margin-top:6px;
}

/* ================================================================
   RESPONSIVE DESIGN — tablets y celulares.
   Lo único que NO se achica es la hoja del CV en sí (.cv-page):
   representa una hoja A4 real, así que en pantallas angostas se
   ve con scroll horizontal dentro de .preview-scroll (como corresponde
   a la vista previa fiel de un documento que después se imprime).
================================================================ */

/* ---- Tablets (hasta 768px) ---- */
@media(max-width:768px){
  #app{padding:24px 14px 50px;}
  header.top{padding:22px 18px;}
  header.top h1{font-size:1.9rem;}
  .logo-rayo{width:32px;height:32px;}
  .card{padding:18px 16px;}
  .stepper .step{font-size:.78rem;padding:8px 4px;}
  .btn-donar{top:14px;left:14px;padding:10px 18px;font-size:.9rem;}
}

/* ---- Celulares (hasta 480px) ---- */
@media(max-width:480px){
  #app{padding:64px 10px 40px;}
  header.top{padding:18px 14px;border-radius:12px;}
  header.top h1{font-size:1.6rem;}
  header.top p{font-size:.82rem;}
  .logo-rayo{width:28px;height:28px;}
  .logo-wrap{gap:8px;}
  .card{padding:15px 14px;border-radius:12px;}
  .card h2{font-size:.95rem;}
  .stepper{gap:6px;}
  .stepper .step{font-size:.72rem;padding:7px 3px;}

  /* Botones e inputs, más cómodos para el dedo */
  button{padding:10px 14px;font-size:.85rem;}
  input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],textarea,select{
    font-size:16px; /* evita el zoom automático de iOS al tocar un campo */
  }
  .form-actions{flex-direction:column;align-items:stretch;}
  .form-actions .izq,.form-actions .der{flex-direction:column;width:100%;}
  .form-actions button{width:100%;}
  .botones-descarga{flex-direction:column;}
  .botones-descarga button{width:100%;}

  /* El botón "Colaborar" sigue mostrando su texto en mobile, agrandado
     para que se note bien y no dependa de que lo toquen para saber qué es */
  .btn-donar{
    top:10px;left:10px;padding:11px 16px;font-size:.85rem;gap:7px;max-width:calc(100vw - 20px);
  }
  .btn-donar svg{width:19px;height:19px;}

  /* Pestañas y controles de personalización, más compactos */
  .tab-btn{font-size:.8rem;padding:8px 10px;}
  .control-color-paso2{padding:8px 10px;gap:8px;}
  .control-color-label{font-size:.76rem;}
  .paleta-swatch,.swatch-color{width:28px;height:28px;}

  /* Editor de foto: márgenes más chicos para que entre bien */
  .modal-editor-foto-caja{padding:16px;}
  .modal-colaborar-caja{padding:20px 18px;}
  .alias-caja{flex-direction:column;align-items:stretch;text-align:center;}
  .alias-datos{align-items:center;}
  .btn-copiar-alias{justify-content:center;}

  /* Aviso de que la hoja del CV se ve con scroll horizontal (es una A4 real) */
  .preview-scroll{position:relative;padding:8px;}
  .preview-scroll::before{
    content:"👉 Deslizá para ver la hoja completa";
    display:block;text-align:center;color:var(--ui-texto-suave);
    font-size:.72rem;margin-bottom:8px;
  }
}