/* ============================================================
   MAJO DE ARMAS — página de enlaces
   Un tema oscuro y cálido: negro casi puro, tipografía del sistema
   (no se descarga ninguna fuente, así la primera pantalla aparece
   de inmediato) y un solo acento dorado que recorre toda la marca.
   Escrito para el teléfono primero; a partir de 760px se ensancha.
   ============================================================ */

:root{
  --negro:#0A0A0C;
  --carbon:#131317;
  --carbon-alto:#191920;
  --linea:rgba(255,255,255,.10);
  --linea-viva:rgba(255,255,255,.20);
  --tinta:#F5F5F7;
  --tinta-2:rgba(245,245,247,.68);
  --tinta-3:rgba(245,245,247,.56);
  --oro:#D8B673;
  --oro-claro:#EFD9A8;
  --oro-tenue:rgba(216,182,115,.14);
  --radio:22px;
  --radio-s:14px;
  --sombra:0 20px 46px -26px rgba(0,0,0,.95);
  --suave:cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--negro);
  color:var(--tinta);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1, h2, h3, p, dl, dd, figure{margin:0}
ol, ul{margin:0; padding:0; list-style:none}
img, svg{display:block; max-width:100%}
button{font:inherit; color:inherit}
a{color:inherit}

/* El resplandor cálido de arriba: es lo que hace que el negro no
   se sienta plano. Va en su propia capa para no repintar nada. */
.halo{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 38% at 50% -6%, rgba(216,182,115,.20), transparent 68%),
    radial-gradient(46% 30% at 92% 8%, rgba(216,182,115,.07), transparent 70%),
    radial-gradient(70% 44% at 6% 62%, rgba(120,96,60,.08), transparent 72%);
}

.saltar{
  position:absolute; left:-9999px; top:0; z-index:20;
  padding:12px 18px; border-radius:0 0 12px 0;
  background:var(--tinta); color:#0A0A0C; font-size:.875rem; font-weight:600; text-decoration:none;
}
.saltar:focus{left:0}

:focus-visible{outline:2px solid var(--oro-claro); outline-offset:3px; border-radius:10px}

.hoja{
  position:relative; z-index:1;
  width:100%; max-width:640px;
  margin:0 auto;
  padding:clamp(32px, 8vw, 56px) clamp(18px, 5vw, 28px) 56px;
  padding-bottom:max(56px, env(safe-area-inset-bottom));
}

/* ---------- encabezado ---------- */
.perfil{display:flex; flex-direction:column; align-items:center; text-align:center}

.perfil-foto{
  width:132px; height:132px; border-radius:50%;
  object-fit:cover; object-position:50% 22%;
  border:1px solid rgba(216,182,115,.55);
  padding:4px; background:rgba(216,182,115,.08);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 22px 50px -26px rgba(216,182,115,.55);
}

.perfil-nombre{
  margin-top:20px;
  font-size:clamp(1.75rem, 7vw, 2.25rem);
  font-weight:650; letter-spacing:-.035em; line-height:1.1;
}

.perfil-desc{
  margin-top:12px; max-width:34ch;
  font-size:.9375rem; line-height:1.6; color:var(--tinta-2); text-wrap:pretty;
}

.redes{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:22px}
.red{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--linea); background:rgba(255,255,255,.03);
  color:var(--tinta-2); text-decoration:none;
  transition:color .2s var(--suave), border-color .2s var(--suave), background-color .2s var(--suave), transform .2s var(--suave);
}
.red svg{width:20px; height:20px}
.red-nombre{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
@media (hover:hover){
  .red:hover{color:var(--oro-claro); border-color:rgba(216,182,115,.5); background:var(--oro-tenue); transform:translateY(-2px)}
}
.red:active{transform:scale(.94)}

/* ---------- tarjetas principales ---------- */
.tarjetas{display:grid; gap:14px; margin-top:clamp(30px, 7vw, 44px); scroll-margin-top:24px}

.tarjeta{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  width:100%; padding:20px; border-radius:var(--radio); text-align:left;
  border:1px solid var(--linea);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    var(--carbon);
  box-shadow:var(--sombra);
  color:inherit; text-decoration:none; cursor:pointer;
  transition:transform .28s var(--suave), border-color .28s var(--suave), box-shadow .28s var(--suave);
}
@media (hover:hover){
  .tarjeta:hover{
    transform:translateY(-3px);
    border-color:rgba(216,182,115,.42);
    box-shadow:0 26px 54px -28px rgba(0,0,0,1), 0 0 0 1px rgba(216,182,115,.10);
  }
  .tarjeta:hover .tarjeta-boton{border-color:rgba(216,182,115,.55); color:var(--oro-claro)}
  .tarjeta:hover .tarjeta-boton[data-primario]{background:#fff; color:#0A0A0C}
  .tarjeta:hover .flecha{transform:translateX(3px)}
}
.tarjeta:active{transform:scale(.988)}

.tarjeta-icono{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:46px; height:46px; border-radius:var(--radio-s);
  border:1px solid rgba(216,182,115,.28); background:var(--oro-tenue); color:var(--oro);
}
.tarjeta-icono svg{width:23px; height:23px}
.tarjeta-icono-bandera{padding:0; overflow:hidden; border-color:var(--linea); background:none}
.tarjeta-icono-bandera svg{width:100%; height:100%; object-fit:cover}

.tarjeta-cuerpo{display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0}
.tarjeta-titulo{font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; line-height:1.3}
.tarjeta-desc{font-size:.875rem; line-height:1.55; color:var(--tinta-2); text-wrap:pretty}

.tarjeta-boton{
  display:inline-flex; align-items:center; gap:8px; margin-top:6px;
  min-height:38px; padding:0 16px; border-radius:999px;
  border:1px solid var(--linea-viva); background:rgba(255,255,255,.04);
  font-size:.8125rem; font-weight:550; letter-spacing:-.01em;
  transition:color .2s var(--suave), border-color .2s var(--suave), background-color .2s var(--suave);
}
.tarjeta-boton[data-primario]{
  background:linear-gradient(180deg, var(--oro-claro), var(--oro));
  border-color:transparent; color:#17120A; font-weight:650;
}
.flecha{width:15px; height:15px; transition:transform .2s var(--suave)}

/* ---------- serie de IA ---------- */
.serie{margin-top:clamp(44px, 11vw, 68px)}

.serie-cabecera{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px}
.serie-marca{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--radio-s);
  border:1px solid rgba(216,182,115,.28); background:var(--oro-tenue); color:var(--oro);
}
.serie-marca svg{width:23px; height:23px}
.serie-titulo{font-size:clamp(1.5rem, 6vw, 1.875rem); font-weight:650; letter-spacing:-.03em; line-height:1.2; margin-top:6px}
.serie-sub{max-width:36ch; font-size:.875rem; line-height:1.6; color:var(--tinta-2); text-wrap:pretty}

.serie-acciones{margin-top:8px}
.serie-orden{
  min-height:38px; padding:0 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--linea-viva); background:rgba(255,255,255,.03); color:var(--tinta-2);
  font-size:.8125rem; font-weight:550;
  transition:color .2s var(--suave), border-color .2s var(--suave), background-color .2s var(--suave);
}
@media (hover:hover){
  .serie-orden:hover{color:var(--oro-claro); border-color:rgba(216,182,115,.45); background:var(--oro-tenue)}
}
.serie-orden[aria-pressed="true"]{color:var(--oro-claro); border-color:rgba(216,182,115,.5); background:var(--oro-tenue)}

.serie-destacado{margin-top:clamp(20px, 5vw, 28px)}
.serie-destacado:empty{display:none}
.serie-lista{display:grid; gap:14px; margin-top:14px}
.serie-lista:empty{display:none}

.serie-vacio{
  margin-top:22px; padding:20px; border-radius:var(--radio);
  border:1px dashed var(--linea-viva); text-align:center;
  font-size:.875rem; color:var(--tinta-2);
}
.serie-vacio a{color:var(--oro-claro)}

.serie-mas{
  display:block; width:100%; margin-top:14px; min-height:46px;
  border-radius:999px; cursor:pointer;
  border:1px solid var(--linea-viva); background:rgba(255,255,255,.03); color:var(--tinta);
  font-size:.875rem; font-weight:550;
  transition:border-color .2s var(--suave), background-color .2s var(--suave);
}
@media (hover:hover){ .serie-mas:hover{border-color:rgba(216,182,115,.45); background:var(--oro-tenue)} }
.serie-mas[hidden]{display:none}

/* ---------- tarjeta de video ---------- */
.video{
  overflow:hidden; border-radius:var(--radio);
  border:1px solid var(--linea);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--carbon);
  box-shadow:var(--sombra);
  transition:border-color .28s var(--suave), transform .28s var(--suave);
}
@media (hover:hover){
  .video:hover{border-color:rgba(216,182,115,.34)}
  .video:hover .video-play{transform:translate(-50%,-50%) scale(1.06); background:var(--oro-claro)}
  .video:hover .video-portada img{transform:scale(1.035)}
}
.video[data-destacado]{border-color:rgba(216,182,115,.34)}

/* El marco 16:9 no cambia de tamaño al pasar de la miniatura al
   reproductor: así la página nunca da un salto al pulsar play. */
.video-lienzo{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden}
.video-portada{
  position:absolute; inset:0; display:block; width:100%; height:100%;
  padding:0; border:0; cursor:pointer; text-decoration:none;
  background:#000; overflow:hidden;
}
.video-portada img{
  width:100%; height:100%; object-fit:cover; opacity:.92;
  transition:transform .5s var(--suave), opacity .3s var(--suave);
}
.video-portada::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 100%);
}
.video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:999px;
  background:var(--oro); color:#17120A;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.9);
  transition:transform .25s var(--suave), background-color .25s var(--suave);
  z-index:2;
}
.video-play svg{width:24px; height:24px; margin-left:3px}

.video-etiquetas{position:absolute; left:12px; top:12px; display:flex; flex-wrap:wrap; gap:6px; z-index:2}
.video-cap, .video-nuevo, .video-dur{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  font-size:.6875rem; font-weight:600; letter-spacing:.02em;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.video-cap{background:rgba(10,10,12,.72); border:1px solid var(--linea-viva); color:var(--tinta)}
.video-nuevo{background:linear-gradient(180deg, var(--oro-claro), var(--oro)); color:#17120A}
.video-dur{
  position:absolute; right:12px; bottom:12px; z-index:2;
  background:rgba(10,10,12,.78); border:1px solid var(--linea); color:var(--tinta);
}

.video-info{display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px}
.video-titulo{font-size:.9375rem; font-weight:600; letter-spacing:-.015em; line-height:1.35}
.video[data-destacado] .video-titulo{font-size:1.0625rem}
.video-desc{font-size:.8125rem; line-height:1.55; color:var(--tinta-2); text-wrap:pretty}
.video-pie{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:2px}
.video-fecha{font-size:.6875rem; color:var(--tinta-3)}

.video-boton{
  display:inline-flex; align-items:center; gap:8px;
  min-height:36px; padding:0 15px; border-radius:999px; cursor:pointer;
  border:1px solid var(--linea-viva); background:rgba(255,255,255,.04); color:var(--tinta);
  font-size:.8125rem; font-weight:550; text-decoration:none;
  transition:color .2s var(--suave), border-color .2s var(--suave), background-color .2s var(--suave);
}
.video-boton svg{width:14px; height:14px}
@media (hover:hover){
  .video-boton:hover{color:var(--oro-claro); border-color:rgba(216,182,115,.5); background:var(--oro-tenue)}
}

/* ---------- pie ---------- */
.pie{
  margin-top:clamp(44px, 10vw, 64px); padding-top:26px;
  border-top:1px solid var(--linea); text-align:center;
}
.pie-marca{font-size:.9375rem; font-weight:600; letter-spacing:-.02em}
.pie-nota{margin-top:6px; font-size:.75rem; color:var(--tinta-3)}
.pie-nota a{color:var(--tinta-2); text-decoration:none; border-bottom:1px solid var(--linea-viva)}
.pie-nota a:hover{color:var(--oro-claro); border-bottom-color:rgba(216,182,115,.6)}

/* ---------- entrada ---------- */
@keyframes surgir{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:none}
}
.perfil, .tarjetas > *, .serie-cabecera, .serie-destacado, .serie-lista > *{
  animation:surgir .6s var(--suave) both;
}
.tarjetas > :nth-child(1){animation-delay:.06s}
.tarjetas > :nth-child(2){animation-delay:.12s}
.tarjetas > :nth-child(3){animation-delay:.18s}
.tarjetas > :nth-child(n+4){animation-delay:.24s}
.serie-cabecera{animation-delay:.24s}
.serie-destacado{animation-delay:.3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- pantallas grandes ---------- */
@media (min-width:760px){
  .hoja{max-width:760px}
  .tarjeta{padding:24px 26px; gap:18px}
  .tarjeta-icono{width:52px; height:52px}
  .tarjeta-icono svg{width:26px; height:26px}
  .tarjeta-titulo{font-size:1.125rem}
  .serie-lista{grid-template-columns:1fr 1fr}
  .video-info{padding:18px 20px 20px}
}

/* ============================================================
   AGENDA — ventana modal
   El mismo flujo por pasos del portafolio: una pregunta por
   pantalla, y el calendario solo después del filtro.
   ============================================================ */
.modal{
  width:min(468px, calc(100vw - 24px));
  max-width:none; max-height:min(92vh, 860px);
  padding:0; border:0; border-radius:24px; overflow:hidden;
  background:var(--carbon-alto); color:var(--tinta);
  box-shadow:0 40px 90px -30px rgba(0,0,0,1);
}
.modal::backdrop{background:rgba(6,6,8,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.modal[open]{animation:surgir .28s var(--suave) both}

.modal-caja{display:flex; flex-direction:column; max-height:inherit}
.modal-barra{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:14px 14px 12px 20px; border-bottom:1px solid var(--linea);
}
.modal-titulo{font-size:.875rem; font-weight:600; letter-spacing:-.01em}
.modal-cerrar{
  margin-left:auto; flex:none; width:34px; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--linea); background:none; color:var(--tinta-2); cursor:pointer;
  transition:color .2s var(--suave), border-color .2s var(--suave);
}
.modal-cerrar svg{width:15px; height:15px}
.modal-cerrar:hover{color:var(--tinta); border-color:var(--linea-viva)}
.modal-cuerpo{min-height:0; display:flex; flex-direction:column}
.modal-cargando{padding:40px 20px; text-align:center; font-size:.875rem; color:var(--tinta-3)}

/* El html deja de moverse detrás de la ventana abierta. */
html:has(dialog[open]){overflow:hidden}

.ct-wrap{
  position:relative; display:flex; flex-direction:column;
  min-height:min(340px, 46vh); max-height:min(700px, 78vh);
  background:transparent; color:var(--tinta);
}
.ct-wrap p{margin:0}
.ct-top[hidden], .ct-pie[hidden]{display:none}

.ct-top{flex:none; padding:16px 20px 12px}
.ct-pasos{display:flex; gap:5px; margin-bottom:12px}
.ct-paso{flex:1; height:3px; border-radius:999px; background:rgba(255,255,255,.12); transition:background-color .25s ease}
.ct-paso[data-hecho]{background:var(--oro)}
.ct-rotulo{display:block; font-size:.625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3)}
.ct-titulo{margin-top:4px; font-size:1rem; font-weight:600; letter-spacing:-.02em}

.ct-scroll{flex:1; min-height:0; overflow-y:auto; padding:4px 20px 8px; scrollbar-width:thin; overscroll-behavior:contain}
.ct-scroll::-webkit-scrollbar{width:5px}
.ct-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:10px}
.ct-vista{display:none; flex-direction:column; gap:14px; padding-top:4px}
.ct-vista[data-activa]{display:flex}

.ct-mes{display:flex; align-items:center; justify-content:space-between; gap:10px}
.ct-mes b{font-size:.875rem; font-weight:600; letter-spacing:-.01em}
.ct-nav{
  flex:none; width:32px; height:32px; border-radius:999px; padding:0; cursor:pointer;
  border:1px solid var(--linea-viva); background:none; color:var(--tinta);
  display:flex; align-items:center; justify-content:center;
}
.ct-nav:hover:not(:disabled){background:rgba(255,255,255,.08)}
.ct-nav:disabled{opacity:.22; cursor:default}
.ct-nav svg{width:13px; height:13px}
.ct-semana, .ct-dias{display:grid; grid-template-columns:repeat(7, 1fr); gap:5px}
.ct-semana span{text-align:center; font-size:.5625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3); padding-bottom:2px}
.ct-dia{
  aspect-ratio:1/1; border-radius:11px; padding:0; cursor:pointer;
  border:1px solid transparent; background:rgba(255,255,255,.05); color:rgba(245,245,247,.9);
  font-family:inherit; font-size:.75rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, border-color .15s ease;
}
.ct-dia:disabled{background:none; color:rgba(245,245,247,.18); cursor:default}
.ct-dia[data-libre]{border-color:var(--linea-viva)}
.ct-dia[data-libre]:hover{background:rgba(216,182,115,.16); border-color:rgba(216,182,115,.5)}
.ct-dia[aria-pressed="true"]{background:var(--oro); border-color:var(--oro); color:#17120A; font-weight:650}
.ct-dia[data-hueco]{visibility:hidden}

.ct-horas{display:grid; grid-template-columns:repeat(auto-fill, minmax(94px, 1fr)); gap:8px}
.ct-hora{
  min-height:40px; border-radius:11px; padding:0 6px; cursor:pointer;
  border:1px solid var(--linea-viva); background:none; color:var(--tinta);
  font-family:inherit; font-size:.75rem; line-height:1.2;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, border-color .15s ease;
}
.ct-hora:hover{background:rgba(216,182,115,.14); border-color:rgba(216,182,115,.45)}
.ct-hora[aria-pressed="true"]{background:var(--oro); border-color:var(--oro); color:#17120A; font-weight:600}

.ct-campo{display:flex; flex-direction:column; gap:6px}
.ct-campo label{font-size:.6875rem; letter-spacing:.02em; color:var(--tinta-3)}
.ct-campo input, .ct-campo textarea{
  width:100%; background:rgba(255,255,255,.04); color:var(--tinta);
  border:1px solid var(--linea-viva); border-radius:12px; padding:11px 14px;
  font-family:inherit; font-size:.875rem; line-height:1.45; outline:none;
  transition:border-color .15s ease;
}
.ct-campo input::placeholder, .ct-campo textarea::placeholder{color:rgba(245,245,247,.3)}
.ct-campo input:focus, .ct-campo textarea:focus{border-color:rgba(216,182,115,.6)}
.ct-campo textarea{resize:vertical; min-height:104px}
.ct-oculto{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

.ct-grupo{display:flex; flex-direction:column; gap:9px}
.ct-etiqueta{font-size:.8125rem; line-height:1.45; color:var(--tinta-2)}
.ct-opciones{display:flex; flex-direction:column; gap:7px}
.ct-opcion{
  width:100%; min-height:44px; padding:10px 15px; border-radius:12px; cursor:pointer;
  border:1px solid var(--linea); background:rgba(255,255,255,.03); color:var(--tinta);
  font-family:inherit; font-size:.8125rem; line-height:1.35; text-align:left;
  display:flex; align-items:center; gap:11px;
  transition:background-color .15s ease, border-color .15s ease;
}
.ct-opcion:hover{background:rgba(255,255,255,.07); border-color:var(--linea-viva)}
.ct-opcion::before{
  content:""; flex:none; width:15px; height:15px; border-radius:999px;
  border:1px solid rgba(245,245,247,.38); background:transparent;
  transition:border-color .15s ease, border-width .15s ease;
}
.ct-opcion[aria-pressed="true"]{background:var(--oro-tenue); border-color:rgba(216,182,115,.7)}
.ct-opcion[aria-pressed="true"]::before{border:5px solid var(--oro)}

.ct-lead{display:flex; flex-direction:column; gap:11px; width:100%; margin-top:4px; text-align:left}
.ct-lead[hidden]{display:none}
.ct-gracias{
  padding:12px 16px; border-radius:12px; width:100%;
  background:rgba(52,199,90,.12); border:1px solid rgba(52,199,90,.3);
  font-size:.8125rem; line-height:1.5; color:#9BE6B4;
}
.ct-gracias[hidden]{display:none}
.ct-redes{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 12px;
  margin-top:6px; padding-top:14px; border-top:1px solid var(--linea); width:100%;
}
.ct-redes span{font-size:.6875rem; color:var(--tinta-3)}
.ct-redes a{font-size:.6875rem; color:var(--tinta); text-decoration:none; border-bottom:1px solid var(--linea-viva)}
.ct-redes a:hover{color:var(--oro-claro); border-bottom-color:rgba(216,182,115,.6)}

.ct-aviso{
  display:none; font-size:.75rem; line-height:1.5; color:#FFAFAF;
  border:1px solid rgba(255,140,140,.32); background:rgba(255,120,120,.08);
  border-radius:11px; padding:9px 12px;
}
.ct-aviso[data-show]{display:block}
.ct-pista{font-size:.6875rem; line-height:1.5; color:var(--tinta-3)}

.ct-resumen{
  display:grid; grid-template-columns:auto 1fr; gap:9px 16px;
  border:1px solid var(--linea); border-radius:14px; padding:15px 17px;
}
.ct-resumen dt{font-size:.625rem; letter-spacing:.04em; color:var(--tinta-3); text-transform:uppercase}
.ct-resumen dd{margin:0; font-size:.8125rem; line-height:1.5; word-break:break-word}

.ct-listo{align-items:center; text-align:center; gap:14px; padding-top:14px}
.ct-tick{
  flex:none; width:54px; height:54px; border-radius:999px; background:#34C75A;
  display:flex; align-items:center; justify-content:center;
}
.ct-tick svg{width:26px; height:26px}
.ct-listo h3{font-size:1.0625rem; font-weight:650; letter-spacing:-.02em}
.ct-listo .ct-cuando{font-size:.8125rem; line-height:1.55; color:var(--tinta-2)}
.ct-acciones{display:flex; flex-direction:column; gap:8px; width:100%; margin-top:2px}
.ct-accion{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--linea-viva); background:none; color:var(--tinta);
  font-family:inherit; font-size:.8125rem; font-weight:550; text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease;
}
.ct-accion:hover{background:rgba(255,255,255,.07)}
.ct-accion[data-primario]{
  background:linear-gradient(180deg, var(--oro-claro), var(--oro));
  border-color:transparent; color:#17120A; font-weight:650;
}
.ct-accion[data-primario]:hover{background:var(--oro-claro)}

.ct-pie{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:12px 20px 18px; border-top:1px solid var(--linea);
}
.ct-atras{
  background:none; border:0; padding:8px 2px; cursor:pointer;
  color:var(--tinta-3); font-family:inherit; font-size:.8125rem;
}
.ct-atras:hover{color:var(--tinta)}
.ct-atras[hidden]{display:none}
.ct-zona{margin-left:auto; font-size:.5625rem; line-height:1.4; color:var(--tinta-3); text-align:right; max-width:15ch}
.ct-seguir{
  flex:none; min-height:42px; padding:0 22px; border-radius:999px; border:0; cursor:pointer;
  background:linear-gradient(180deg, var(--oro-claro), var(--oro)); color:#17120A;
  font-family:inherit; font-size:.8125rem; font-weight:650; letter-spacing:-.01em;
}
.ct-seguir:hover:not(:disabled){background:var(--oro-claro)}
.ct-seguir:disabled{opacity:.32; cursor:default}

@media (max-width:400px){
  .ct-top, .ct-scroll, .ct-pie{padding-left:16px; padding-right:16px}
  .ct-horas{grid-template-columns:repeat(auto-fill, minmax(84px, 1fr))}
}