/* ============================================
   ClinIAssist — Asistentes IA + Planes
   Secciones #asistentes y #precios (siempre oscuras).
   Todas las clases empiezan con "ca-".
   ============================================ */
.ca-section{ background:#070d1f; color:#e8edf8; font-family:'Plus Jakarta Sans', var(--font-body, system-ui), sans-serif; padding:96px 0; }
.ca-section *{ box-sizing:border-box; }
.ca-team{ padding-top:48px; padding-bottom:40px; }
.ca-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; display:flex; flex-direction:column; gap:40px; }
.ca-head{ display:flex; flex-direction:column; gap:14px; max-width:720px; }
.ca-head-center{ align-items:center; text-align:center; margin-inline:auto; }
.ca-head h2{ margin:0; font-size:clamp(32px,5vw,44px); line-height:1.1; font-weight:800; letter-spacing:-.02em; color:#e8edf8; }
.ca-head p{ margin:0; font-size:18px; line-height:1.6; color:#a3aecb; }

/* Compactación exclusiva de #asistentes: .ca-wrap y .ca-head son clases
   compartidas con #precios, así que todo lo que reduce tamaños/espacios
   va escopado a #asistentes puntualmente para no afectar los planes. */
#asistentes .ca-wrap{ gap:24px; }
#asistentes .ca-head{ gap:8px; }
#asistentes .ca-head h2{ font-size:clamp(26px,4vw,34px); }
#asistentes .ca-head p{ font-size:16px; }
.ca-eyebrow{ display:flex; align-items:center; gap:12px; font-family:var(--font-mono, monospace); font-size:13px; letter-spacing:.14em; color:#8fb0ff; }
.ca-eyebrow i{ width:56px; height:1px; background:#2a3a66; }
.ca-mono{ font-family:var(--font-mono, monospace); font-size:13px; letter-spacing:.14em; color:#a3aecb; }

/* Pestañas de asistentes */
.ca-tabs{ display:flex; flex-wrap:wrap; gap:10px; }
.ca-tab{ display:inline-flex; align-items:center; gap:10px; min-height:42px; padding:6px 18px 6px 6px; border-radius:999px; cursor:pointer; font:700 15px 'Plus Jakarta Sans', system-ui, sans-serif; background:#0e1730; color:#e8edf8; border:1px solid #22305a; transition:background .2s, color .2s, border-color .2s; }
.ca-tab:hover{ border-color:var(--c); }
.ca-tab[aria-selected="true"]{ background:var(--c); border-color:var(--c); color:#070d1f; }
.ca-tab:focus-visible{ outline:2px solid #8fb0ff; outline-offset:3px; }

/* Anillo de la ficha, estilo "historia" de Instagram: un pseudo-elemento con
   degradado cónico gira detrás de la foto, dejando un aro de 2-3px visible
   alrededor (la foto es más chica que el círculo que lo contiene). */
.ca-tab-avatar{ position:relative; width:36px; height:36px; border-radius:50%; flex-shrink:0; }
.ca-tab-avatar::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, var(--c), color-mix(in srgb, var(--c) 25%, white) 25%, var(--c) 50%, color-mix(in srgb, var(--c) 25%, white) 75%, var(--c));
  animation: caRingSpin 7s linear infinite;
}
.ca-tab-avatar img{ position:absolute; inset:3px; width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:top; }
@keyframes caRingSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .ca-tab-avatar::before{ animation:none; } }

.ca-panel{ display:grid; grid-template-columns:340px 1fr; gap:48px; align-items:start; animation:caFade .35s var(--ease, ease); }
.ca-panel[hidden]{ display:none; }
@keyframes caFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ca-photo{ position:relative; max-width:340px; width:100%; }
.ca-photo img{
  display:block; width:100%; height:min(420px, 52vh); object-fit:cover; object-position:top; border-radius:24px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 52%, transparent), 0 0 54px color-mix(in srgb, var(--c) 26%, transparent);
  animation: caBreathe 5.5s cubic-bezier(.45,0,.55,1) infinite;
  will-change: transform;
}
#ca-panel-valentina .ca-photo img{ animation-delay: 0s; }
#ca-panel-diego .ca-photo img{ animation-delay: 1.2s; }
#ca-panel-emilia .ca-photo img{ animation-delay: 2.4s; }
#ca-panel-mateo .ca-photo img{ animation-delay: 3.6s; }

/* Respiración muy leve: solo transform (scale + elevación), para que la
   animación corra 100% en el compositor y se vea perfectamente fluida.
   El resplandor de color se deja fijo (no se anima el box-shadow): es una
   propiedad cara de repintar en cada frame y, al compartir el ciclo con el
   transform, el repintado competía por cuadros y hacía ver el movimiento
   entrecortado en vez de fluido. */
@keyframes caBreathe{
  0%, 100%{ transform: scale(1) translateY(0); }
  50%{ transform: scale(1.015) translateY(-2px); }
}
@media (prefers-reduced-motion: reduce){
  .ca-photo img, .ca-addon-intro img{ animation:none; }
}
.ca-badges{ position:absolute; left:16px; right:16px; bottom:16px; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:8px; pointer-events:none; }
.ca-live{ display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:rgba(7,13,31,.86); border:1px solid #2a3a66; font-size:11px; font-weight:600; }
.ca-live span{ width:7px; height:7px; border-radius:50%; background:#3ddc97; }

/* El botón "Ver presentación" es el disparador principal del reproductor:
   fondo con el color de acento del asistente, texto oscuro para que
   destaque más que "Disponible 24/7", y un leve brillo periódico (barrido
   de luz, no box-shadow, para no pelear con el glow del hover) que llama
   la atención sin ser invasivo. */
.ca-story-badge{
  position:relative; overflow:hidden; pointer-events:auto;
  display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  background:var(--c); color:#0F1F3D; font:inherit; font-size:13px; font-weight:800;
  border:none; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ca-story-badge-icon{
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; background:#fff; color:var(--c);
}
.ca-story-badge-icon svg{ width:10px; height:10px; margin-left:1px; }
.ca-story-badge:hover{ transform:translateY(-2px); box-shadow: 0 0 0 1px var(--c), 0 0 20px color-mix(in srgb, var(--c) 55%, transparent); }
.ca-story-badge:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.ca-story-badge::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: caBadgeShine 4s ease-in-out infinite;
}
@keyframes caBadgeShine{
  0%{ left:-60%; }
  18%, 100%{ left:130%; }
}
@media (prefers-reduced-motion: reduce){ .ca-story-badge::after{ animation:none; display:none; } }

/* Foto grande: la vista previa en video reemplaza la foto al pasar el
   mouse (solo con mouse/trackpad real, nunca en táctil, donde "hover" no
   tiene un significado persistente). Toda la foto es clickeable. */
.ca-photo{ cursor:pointer; }
.ca-photo-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top;
  border-radius:24px; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.ca-photo-video.is-playing-preview{ opacity:1; }
.ca-info{ display:flex; flex-direction:column; gap:12px; }
.ca-name{ margin:0 0 6px; font-size:clamp(40px,5vw,56px); line-height:.95; font-weight:800; letter-spacing:-.03em; color:var(--c); }
.ca-role{ font-size:16px; font-weight:600; color:#c9d3ec; }
.ca-headline{ margin:0; font-size:clamp(20px,2.4vw,22px); line-height:1.2; font-weight:700; color:#e8edf8; }
.ca-desc{ margin:0; font-size:15px; line-height:1.55; color:#a3aecb; }
.ca-skills{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ca-skills li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.45; }
.ca-check{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; margin-top:1px; background:#111a33; border:1px solid var(--c); color:var(--c); }
.ca-check svg{ width:14px; height:14px; }
.ca-plans{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:12px; border-top:1px solid #1c2748; }
.ca-plans > span:first-child{ font-size:14px; color:#a3aecb; }
.ca-chip{ padding:6px 12px; border-radius:999px; background:#111a33; border:1px solid #2a3a66; font-size:13px; font-weight:600; }

/* Reproductor tipo "historia": fondo oscuro con blur, video vertical
   centrado (9:16, hasta 90vh), barra de progreso + cabecera arriba, 3
   franjas invisibles encima del video para anterior/pausa/siguiente, y la
   tarjeta de cierre (CTA + siguiente) que aparece al terminar. */
.ca-story{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; }
.ca-story[hidden]{ display:none; }
.ca-story-backdrop{ position:absolute; inset:0; background:rgba(5,8,18,0.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.ca-story-frame{
  position:relative; z-index:1; width:min(92vw, 90vh * 9 / 16, 506px);
  aspect-ratio:9/16; border-radius:24px; overflow:hidden; background:#000;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}
.ca-story-progress{ position:absolute; top:12px; left:12px; right:12px; z-index:5; display:flex; gap:5px; }
.ca-story-bar{ position:relative; flex:1; height:3px; border-radius:999px; background:rgba(255,255,255,0.3); overflow:hidden; }
.ca-story-bar i{ display:block; height:100%; width:100%; background:#fff; transform-origin:left center; transform:scaleX(0); }
.ca-story-head{ position:absolute; top:24px; left:12px; right:12px; z-index:5; display:flex; align-items:center; gap:10px; }
.ca-story-avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; object-position:top; border:1px solid rgba(255,255,255,0.5); }
.ca-story-who{ display:flex; flex-direction:column; flex:1; min-width:0; }
.ca-story-name{ font-size:14px; font-weight:800; color:#fff; line-height:1.2; }
.ca-story-role{ font-size:12px; color:rgba(255,255,255,0.75); line-height:1.2; }
.ca-story-close{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,0.35); color:#fff; display:flex; align-items:center; justify-content:center;
}
.ca-story-close svg{ width:16px; height:16px; }
.ca-story-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.ca-story-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; background:#000; }
.ca-story-zone{ position:absolute; top:0; bottom:0; width:33.333%; border:none; background:transparent; padding:0; margin:0; cursor:pointer; }
.ca-story-zone-prev{ left:0; }
.ca-story-zone-pause{ left:33.333%; }
.ca-story-zone-next{ right:0; }
.ca-story-pausedicon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; pointer-events:none;
  width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,0.45); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.ca-story-pausedicon svg{ width:28px; height:28px; }
.ca-story-end{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:12px; padding:0 20px 28px; background:linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0) 40%);
}
.ca-story-cta{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; padding:0 20px;
  border-radius:12px; background:#fff; color:#0a1226; font-weight:800; font-size:16px; text-decoration:none; text-align:center;
}
.ca-story-next-link{ background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.85); font:inherit; font-size:14px; font-weight:600; text-decoration:underline; padding:4px; }
.ca-story-next-link:focus-visible, .ca-story-cta:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

@media (max-width:600px){
  .ca-story-frame{ width:100vw; height:100vh; max-height:none; border-radius:0; aspect-ratio:auto; }
}

/* Planes */
.ca-pricing{ padding-top:64px; padding-bottom:64px; }
.ca-pricing-addon{ padding-top:56px; padding-bottom:64px; }
.ca-pricing-addon .ca-wrap{ gap:20px; }
.ca-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:24px; align-items:stretch; }

/* Tarjetas de plan con volteo 3D: .ca-card es el contenedor de perspectiva,
   .ca-card-inner es lo único que rota y además es un grid: el frente y el
   dorso comparten la misma celda (grid-area:1/1) en vez de
   position:absolute, así que la celda (y por lo tanto la tarjeta) toma el
   alto de la cara más alta de las dos, sin recortar ni hacer scroll. Las 3
   tarjetas quedan a la misma altura entre sí gracias a align-items:stretch
   en .ca-grid (misma fila => mismo alto, igual a la tarjeta más alta). */
.ca-card{ position:relative; perspective:1400px; transition:transform .3s var(--ease, ease); cursor:pointer; }
.ca-card:hover{ transform:translateY(-6px); }
.ca-card:focus-visible{ outline:2px solid #8fb0ff; outline-offset:4px; border-radius:24px; }
.ca-card-inner{ position:relative; width:100%; height:100%; display:grid; transform-style:preserve-3d; transition:transform .6s cubic-bezier(0.4,0.15,0.2,1); }
.ca-card.is-flipped .ca-card-inner{ transform:rotateY(180deg); }
.ca-card-face{
  grid-area:1/1; backface-visibility:hidden;
  display:flex; flex-direction:column; gap:14px; padding:24px;
  border-radius:24px; background:#0e1730; border:1px solid #22305a;
  transition: box-shadow .3s var(--ease, ease);
}
.ca-card-back{ transform:rotateY(180deg); cursor:pointer; }
.ca-card-back a, .ca-card-back button{ cursor:pointer; }
.ca-card:hover .ca-card-face{ box-shadow: 0 0 0 1px #8fb0ff, 0 0 32px rgba(143,176,255,0.35); }
.ca-card.is-highlight .ca-card-face{ background:#1f4fd1; border-color:#4d7cff; }
.ca-card.is-highlight:hover .ca-card-face{ box-shadow: 0 0 0 1px #4d7cff, 0 0 32px rgba(77,124,255,0.35); }
.ca-team-list{ flex:1; }
.ca-card-title p{ min-height: calc(2 * 1.5em); }
.ca-badge{ position:absolute; top:-14px; left:28px; padding:5px 12px; border-radius:999px; background:#ffd9d0; color:#6b1f10; font-size:12px; font-weight:700; z-index:1; }
.ca-card-title{ display:flex; flex-direction:column; gap:4px; }
.ca-card-title > span{ font-size:14px; color:#a3aecb; }
.ca-card-title h3{ margin:0; font-size:26px; font-weight:800; color:#e8edf8; }
.ca-card-title p{ margin:0; font-size:15px; color:#a3aecb; }
.ca-label{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#a3aecb; }
.ca-price{ display:flex; flex-direction:column; gap:14px; padding:20px; border-radius:16px; background:#0a1226; border:1px solid #1c2748; }
.ca-price-row{ display:flex; justify-content:space-between; align-items:baseline; gap:8px 12px; flex-wrap:wrap; }
.ca-price-row > *{ min-width:0; }
.ca-install{ font-size:18px; font-weight:700; color:#8fb0ff; }
.ca-price-sub{ display:flex; flex-direction:column; gap:2px; padding-top:14px; border-top:1px solid #1c2748; }
.ca-monthly{ font-size:40px; font-weight:800; letter-spacing:-.02em; color:#e8edf8; }
.ca-monthly small{ font-size:16px; font-weight:600; color:#a3aecb; }
.ca-btn{ display:flex; justify-content:center; align-items:center; min-height:52px; padding:0 22px; border-radius:12px; background:#1d2b57; color:#fff; font-weight:700; font-size:16px; text-decoration:none; transition:filter .2s; }
.ca-btn:hover{ filter:brightness(1.15); color:#fff; }
.ca-team-meta{ font-size:13px; font-weight:700; letter-spacing:.04em; color:#a3aecb; }
.ca-team-list{ display:flex; flex-direction:column; gap:14px; }
.ca-team-sub{ margin:-8px 0 0; font-size:13px; color:#a3aecb; }
.ca-flip-cue{
  margin:0; display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:13px; font-weight:600; color:#8fb0ff; text-align:center;
}
.ca-flip-cue-icon{ width:14px; height:14px; flex-shrink:0; }
.ca-card.is-highlight .ca-flip-cue{ color:#bcd0ff; }
.ca-back-close{
  display:flex; align-items:center; gap:6px; align-self:flex-start;
  padding:4px 2px; margin:0 0 -8px;
  font-size:13px; font-weight:600; color:#a3aecb;
}
.ca-back-close svg{ width:16px; height:16px; }
.ca-back-title{ margin:0; font-size:20px; font-weight:800; color:#e8edf8; }
.ca-card.is-highlight .ca-back-close{ color:rgba(255,255,255,0.75); }
.ca-card.is-highlight .ca-team-meta{ color:#e8eeff; }
.ca-card.is-highlight .ca-back-title{ color:#fff; }
.ca-member{ display:flex; flex-direction:column; gap:10px; }
/* Miembro sin listado propio (ya incluido en el plan anterior): se agrupan
   como avatares compactos, con poco aire entre uno y el siguiente en vez
   del gap:18px normal pensado para separar bloques con su propia lista. */
.ca-member-compact{ margin-bottom:-8px; }
.ca-member-head{ display:flex; align-items:center; gap:12px; }
.ca-member-head img{
  width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:top;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 45%, transparent), 0 0 24px color-mix(in srgb, var(--c) 22%, transparent);
}
.ca-member-head div{ display:flex; flex-direction:column; }
.ca-member-head span{ font-size:13px; color:#a3aecb; }
.ca-member ul{ list-style:none; margin:0; padding:0 0 0 4px; display:flex; flex-direction:column; gap:6px; }
.ca-member li{ display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.45; }
.ca-member li svg{ flex-shrink:0; width:14px; height:14px; margin-top:3px; color:var(--c); }

/* Plan destacado */
.ca-card.is-highlight .ca-card-title > span,
.ca-card.is-highlight .ca-card-title p,
.ca-card.is-highlight .ca-label,
.ca-card.is-highlight .ca-monthly small,
.ca-card.is-highlight .ca-member-head span{ color:#e8eeff; }
.ca-card.is-highlight .ca-price{ background:#2a5de0; border-color:#5a86ff; }
.ca-card.is-highlight .ca-price-sub{ border-top-color:#5a86ff; }
.ca-card.is-highlight .ca-install{ color:#fff; }
.ca-card.is-highlight .ca-btn{ background:#fff; color:#173a9e; }
.ca-card.is-highlight .ca-member-head img{ border-color: rgba(255,255,255,0.6); box-shadow: 0 0 12px rgba(255,255,255,0.4); }
.ca-card.is-highlight .ca-member li svg{ color:#fff; }

/* Compactación de #precios: al 100% de zoom debe verse aprox. lo mismo que
   hoy se ve al 70% (título + 3 tarjetas completas + inicio de "TU EQUIPO").
   clamp() usa estos valores reducidos (~×0.65–0.85 según el elemento) como
   techo para pantallas grandes, y deja un piso legible en celular; nada se
   escala con transform, son tamaños reales. Todo escopado a #precios para
   no tocar #asistentes, que comparte varias de estas clases. */
.ca-pricing{ padding-top: clamp(32px, 5vh, 38px); padding-bottom: clamp(32px, 5vh, 38px); }
#precios .ca-head{ gap: 8px; }
#precios .ca-eyebrow{ font-size: clamp(8.5px, 1vw, 9px); }
#precios .ca-head h2{ font-size: clamp(22px, 3.5vw, 31px); }
#precios .ca-head p{ font-size: clamp(12px, 1.4vw, 13px); }

#precios .ca-grid{ gap: clamp(14px, 1.8vw, 17px); }
#precios .ca-card-face{ padding: clamp(14px, 1.8vw, 17px); gap: 10px; border-radius: clamp(16px, 2vw, 19px); }
#precios .ca-card-title{ gap: 2px; }
#precios .ca-card-title > span{ font-size: 12px; }
#precios .ca-card-title h3{ font-size: clamp(17px, 2.2vw, 19.5px); }
#precios .ca-card-title p{ font-size: 13px; }
#precios .ca-price{ padding: clamp(12px, 1.6vw, 14px); gap: 10px; }
#precios .ca-price-sub{ padding-top: 10px; }
#precios .ca-install{ font-size: clamp(13px, 1.4vw, 15px); }
#precios .ca-monthly{ font-size: clamp(21px, 3vw, 26px); }
#precios .ca-monthly small{ font-size: clamp(12px, 1.3vw, 14px); }
#precios .ca-capacity-line{ font-size: clamp(10.5px, 1.2vw, 11px); }
#precios .ca-mini-icon{ width: 12px; height: 12px; }
#precios .ca-btn{ min-height: clamp(38px, 4.5vw, 40px); font-size: clamp(13px, 1.5vw, 14px); }
#precios .ca-team-meta{ font-size: clamp(10.5px, 1.2vw, 11px); }
#precios .ca-team-sub{ font-size: clamp(10.5px, 1.2vw, 11px); }
#precios .ca-member{ gap: 8px; }
#precios .ca-member-head{ gap: 10px; }
#precios .ca-member-head img{ width: clamp(32px, 3.6vw, 35px); height: clamp(32px, 3.6vw, 35px); }
#precios .ca-member li{ font-size: clamp(11.5px, 1.3vw, 12px); gap: 7px; }
#precios .ca-member li svg{ width: 12px; height: 12px; }
#precios .ca-flip-cue{ font-size: clamp(10.5px, 1.2vw, 11px); }
#precios .ca-flip-cue-icon{ width: 12px; height: 12px; }

/* Dorso de la tarjeta: misma proporción, por consistencia visual */
#precios .ca-back-close{ font-size: 11px; }
#precios .ca-back-close svg{ width: 14px; height: 14px; }
#precios .ca-back-title{ font-size: clamp(16px, 2vw, 17px); }
#precios .ca-capacity-block{ padding: 12px; gap: 7px; }
#precios .ca-capacity-list li{ font-size: 11.5px; }
#precios .ca-includes-block{ gap: 5px; }
#precios .ca-chip-task{ font-size: 10px; padding: 3px 7px; }
#precios .ca-back-meta{ font-size: 11px; }
#precios .ca-back-install{ font-size: 10px; }
#precios .ca-capacity-more{ font-size: 11px; }

/* Mateo adicional: columna angosta (foto + texto, centrado) a la
   izquierda y las opciones Base/Pro/Premium a todo el ancho a la derecha. */
.ca-addon{ display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start; padding:36px; border-radius:28px; background:#0e1730; border:1px solid #33466f; transition:transform .3s var(--ease, ease), box-shadow .3s var(--ease, ease); }
.ca-addon:hover{ transform:translateY(-6px); box-shadow: 0 0 0 1px #9bbf6a, 0 0 32px rgba(155,191,106,0.35); }
.ca-addon-intro{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.ca-addon-intro img{
  width:150px; height:150px; border-radius:24px; object-fit:cover; object-position:top; flex-shrink:0;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 52%, transparent), 0 0 54px color-mix(in srgb, var(--c) 26%, transparent);
  animation: caBreathe 5.5s cubic-bezier(.45,0,.55,1) infinite;
  animation-delay: 0.8s;
  will-change: transform;
}
.ca-addon-text{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; min-width:0; }
.ca-addon-text .ca-mono{ font-size:12px; color:#cfe3b0; }
.ca-addon-text h3{ margin:0; font-size:24px; font-weight:800; line-height:1.2; color:#e8edf8; }
.ca-addon-text p{ margin:0; font-size:15px; line-height:1.5; color:#a3aecb; }
.ca-addon-text .ca-addon-highlight{ margin-top:4px; font-size:15px; font-weight:700; color:#e8edf8; }
.ca-addon-highlight b{ color:#9bbf6a; }
.ca-addon-price{ display:flex; flex-direction:column; gap:18px; }

.ca-mode-toggle{ display:flex; gap:4px; padding:4px; border-radius:14px; background:#0a1226; border:1px solid #22305a; }
.ca-mode-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  min-height:44px; padding:8px 12px; border-radius:10px; border:none; background:transparent;
  font:inherit; font-size:14px; font-weight:700; color:#a3aecb; text-align:center; cursor:pointer;
  transition: background .2s ease, color .2s ease;
}
.ca-mode-btn:hover{ color:#e8edf8; }
.ca-mode-btn:focus-visible{ outline:2px solid #9bbf6a; outline-offset:2px; }
.ca-mode-btn[aria-checked="true"]{ background:#9bbf6a; color:#14210a; }
.ca-mode-btn[aria-checked="true"]:hover{ color:#14210a; }
.ca-mode-off{ font-size:11px; font-weight:800; padding:1px 6px; border-radius:999px; background:rgba(155,191,106,0.15); color:#9bbf6a; }
.ca-mode-btn[aria-checked="true"] .ca-mode-off{ background:rgba(10,18,38,0.2); color:#14210a; }

.ca-tiers{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.ca-tier{
  position:relative; min-height:44px; padding:20px; border-radius:12px; background:#0a1226; border:1px solid #22305a;
  display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  font:inherit; color:inherit; -webkit-appearance:none; appearance:none;
  transition: transform .2s var(--ease, ease), border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ca-tier-head{ display:flex; flex-direction:column; gap:2px; padding-right:22px; }
.ca-tier strong{ font-size:18px; font-weight:800; color:#e8edf8; }
.ca-tier span{ font-size:13px; color:#a3aecb; }
.ca-tier:hover{ transform:translateY(-3px); border-color:#9bbf6a; box-shadow: 0 0 0 1px #9bbf6a, 0 0 20px rgba(155,191,106,0.3); }
.ca-tier[aria-checked="true"]{ background:#0e1f12; border-color:#9bbf6a; box-shadow: 0 0 0 1px #9bbf6a, 0 0 24px rgba(155,191,106,0.35); }
.ca-tier:focus-visible{ outline:2px solid #9bbf6a; outline-offset:2px; }
.ca-tier-check{
  position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%;
  background:#9bbf6a; color:#0a1226; padding:3px; box-sizing:border-box;
  opacity:0; transform:scale(.5); transition: opacity .2s ease, transform .2s ease;
}
.ca-tier[aria-checked="true"] .ca-tier-check{ opacity:1; transform:scale(1); }

.ca-tier-price{ display:flex; flex-direction:column; gap:7px; margin-top:12px; padding-top:14px; border-top:1px solid #1c2748; transition: opacity .2s ease; }
.ca-tier-price.is-fading{ opacity:0; }
.ca-tier-price-plan, .ca-tier-price-web{ display:flex; flex-direction:column; gap:5px; }
.ca-tier-row-old{ display:flex; align-items:center; gap:6px; }
.ca-tier-old{ font-size:12px; color:#6b7694; white-space:nowrap; }
.ca-tier-off{ font-size:11px; font-weight:800; color:#14210a; background:#9bbf6a; padding:1px 6px; border-radius:999px; white-space:nowrap; }
.ca-tier-desde{ font-size:12px; font-weight:700; color:#a3aecb; }
.ca-tier-now{ font-size:28px; font-weight:800; color:#e8edf8; line-height:1.15; white-space:nowrap; }
.ca-tier-cuotas{ font-size:14px; color:#a3aecb; }
.ca-tier-save{ display:flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color:#9bbf6a; }
.ca-tier-save svg{ width:12px; height:12px; flex-shrink:0; }
.ca-tier-unique{ font-size:13px; color:#a3aecb; }
.ca-tier-suggest{ font-size:13px; color:#6b7694; }

.ca-addon-smallprint{ margin:0; font-size:12px; color:#6b7694; }

.ca-btn-addon{ align-self:flex-start; background:var(--c); color:#14210a; transition: filter .2s, opacity .2s; }
.ca-btn-addon:hover{ color:#14210a; }
.ca-btn-addon[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.ca-addon-hint{ margin:-8px 0 0; font-size:13px; color:#a3aecb; }
.ca-addon-hint[hidden]{ display:none; }
.ca-legal{ margin:0; text-align:center; font-size:14px; color:#a3aecb; }

/* Franja debajo de las 3 tarjetas de plan, con link a #mateo */
.ca-mateo-strip{
  display:flex; align-items:center; gap:16px; padding:16px 20px;
  border-radius:16px; background:#0b1a17; border:1px solid #4f6b33;
  text-decoration:none; color:#e8edf8;
  box-shadow: 0 0 24px rgba(155,191,106,0.1);
  transition: transform .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
.ca-mateo-strip:hover{ transform:translateY(-3px); box-shadow: 0 0 0 1px #9bbf6a, 0 0 28px rgba(155,191,106,0.3); }
.ca-mateo-strip:focus-visible{ outline:2px solid #9bbf6a; outline-offset:3px; }
.ca-mateo-strip-photo{
  width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:top; flex-shrink:0;
  border:1px solid rgba(155,191,106,0.6);
  box-shadow: 0 0 10px rgba(155,191,106,0.5), 0 0 22px rgba(155,191,106,0.25);
}
.ca-mateo-strip-text{ flex:1; min-width:0; font-size:15px; line-height:1.4; color:#c9d3ec; }
.ca-mateo-strip-text strong{ color:#e8edf8; }
.ca-mateo-strip-pill{
  flex-shrink:0; display:inline-flex; align-items:center; padding:10px 18px; border-radius:999px;
  background:#9bbf6a; color:#14210a; font-weight:800; font-size:14px; white-space:nowrap;
}
@media (max-width:600px){
  .ca-mateo-strip{ flex-wrap:wrap; }
  .ca-mateo-strip-pill{ flex-basis:100%; justify-content:center; }
}

/* Al llegar a #mateo desde la franja, el recuadro brilla en verde ~1.2s para
   que el ojo lo encuentre. #mateo.section-focus ya lo agrega script.js al
   navegar a cualquier ancla "#...", así que no hace falta JS nuevo acá. */
#mateo.section-focus .ca-addon{ animation: caMateoGlow 1.2s ease; }
@keyframes caMateoGlow{
  0%, 100%{ box-shadow: none; }
  35%{ box-shadow: 0 0 0 2px #9bbf6a, 0 0 50px rgba(155,191,106,0.65); }
}
@media (prefers-reduced-motion: reduce){ #mateo.section-focus .ca-addon{ animation:none; } }

/* Línea discreta de capacidad en el frente de cada tarjeta de plan */
.ca-capacity-line{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; font-size:13px; color:#a3aecb; }
.ca-capacity-line span{ display:inline-flex; align-items:center; gap:5px; }
.ca-capacity-sep{ opacity:.5; }
.ca-mini-icon{ width:14px; height:14px; flex-shrink:0; color:#8fb0ff; }
.ca-card.is-highlight .ca-capacity-line{ color:#e8eeff; }
.ca-card.is-highlight .ca-mini-icon{ color:#bcd0ff; }

/* Bloque "Capacidad del plan" en el reverso de cada tarjeta */
.ca-capacity-block{ display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px; background:#0a1226; border:1px solid #1c2748; }
.ca-capacity-list{ display:flex; flex-direction:column; gap:0; margin:0; padding:0; list-style:none; }
.ca-capacity-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; font-size:13.5px; }
.ca-capacity-list li span{ color:#a3aecb; }
.ca-capacity-list li b{ color:#e8edf8; font-weight:700; white-space:nowrap; }
.ca-card.is-highlight .ca-capacity-block{ background:#2a5de0; border-color:#5a86ff; }
.ca-card.is-highlight .ca-capacity-list li span{ color:#e8eeff; }
.ca-card.is-highlight .ca-capacity-list li b{ color:#fff; }

/* Bloque "Todo lo que incluye" en el reverso: todas las tareas del plan
   como chips compactos en 2 columnas, con un borde del color del
   asistente dueño de cada tarea (mismo --c que .ca-member). Gap fijo con
   el resto de los bloques del reverso (ver .ca-card-face) — nada de
   margin-top:auto acá: solo el bloque final ("¿Necesitas más?" + CTA) se
   empuja abajo, para que el espacio sobrante en planes livianos (Esencial)
   quede todo junto ahí y no partido en medio del reverso. */
.ca-includes-block{ display:flex; flex-direction:column; gap:6px; }
.ca-chip-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; }
.ca-chip-task{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  align-items:center;
  padding:4px 8px; border-radius:8px;
  background:#0a1226; border-left:2px solid var(--c, #8fb0ff);
  font-size:11.5px; line-height:1.3; color:#c9d3ec;
}
.ca-card.is-highlight .ca-chip-task{ background:rgba(10,18,38,0.35); color:#e8eeff; }

/* "Soporte: X h de cambios al mes" + nota de instalación, ambas debajo
   de las tareas y antes del cierre del reverso. */
.ca-back-meta{ display:flex; align-items:center; gap:6px; margin:0; font-size:13px; font-weight:600; color:#a3aecb; }
.ca-card.is-highlight .ca-back-meta{ color:rgba(255,255,255,0.85); }
.ca-card.is-highlight .ca-back-meta .ca-mini-icon{ color:#bcd0ff; }
.ca-back-install{ margin:0; font-size:12px; line-height:1.45; color:#6b7694; }
.ca-card.is-highlight .ca-back-install{ color:rgba(255,255,255,0.6); }

/* "¿Necesitas más? Suma packs cuando quieras" al final del reverso */
.ca-capacity-more{ margin:auto 0 0; font-size:13px; text-align:center; color:#a3aecb; }
.ca-capacity-more a{ color:#8fb0ff; font-weight:700; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.ca-capacity-more a:hover, .ca-capacity-more a:focus-visible{ color:#bcd0ff; }
.ca-card.is-highlight .ca-capacity-more{ color:rgba(255,255,255,0.75); }
.ca-card.is-highlight .ca-capacity-more a{ color:#fff; }

/* Sección "Escala cuando lo necesites" (packs / add-ons) */
.ca-packs{ padding-top:56px; }
.ca-packs-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:24px; }
.ca-pack-card{
  display:flex; flex-direction:column; gap:14px; padding:28px;
  border-radius:24px; background:#0e1730; border:1px solid #22305a;
  transition: transform .3s var(--ease, ease), box-shadow .3s var(--ease, ease);
}
.ca-pack-card:hover{ transform:translateY(-6px); box-shadow: 0 0 0 1px #8fb0ff, 0 0 32px rgba(143,176,255,0.35); }
.ca-pack-card h3{ margin:0; font-size:20px; font-weight:800; color:#e8edf8; }
.ca-pack-price{ margin:0; font-size:32px; font-weight:800; letter-spacing:-.02em; color:#8fb0ff; }
.ca-pack-price small{ font-size:15px; font-weight:600; color:#a3aecb; }
.ca-pack-sub{ margin:0; flex:1; font-size:14px; color:#a3aecb; }
.ca-btn-pack{ min-height:46px; font-size:15px; }
.ca-packs-note{ margin:0; text-align:center; font-size:14px; color:#a3aecb; }

/* Debajo de 800px: foto arriba a ancho completo, info abajo (1 columna) */
@media (max-width:800px){
  .ca-panel{ grid-template-columns:1fr; }
  .ca-photo{ max-width:none; }
  .ca-photo img{ height:min(360px, 50vh); }
}
/* Debajo de 900px: Mateo pasa a una fila horizontal (foto chica + texto al
   lado) arriba, y las opciones Base/Pro/Premium ocupan todo el ancho abajo. */
@media (max-width:900px){
  .ca-addon{ grid-template-columns:minmax(0,1fr); }
  .ca-addon-intro{ flex-direction:row; align-items:center; gap:16px; }
  .ca-addon-intro img{ width:90px; height:90px; border-radius:16px; }
  .ca-addon-text{ align-items:flex-start; text-align:left; flex:1; }
}
@media (max-width:600px){
  .ca-section{ padding:64px 0; }
  .ca-panel{ gap:28px; }
  .ca-card-face, .ca-addon{ padding:22px; }
  .ca-tiers{ grid-template-columns:minmax(0,1fr); }
  .ca-btn-addon{ align-self:stretch; }
  .ca-packs-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce){ .ca-panel{ animation:none; } .ca-card, .ca-addon, .ca-tier, .ca-mode-btn, .ca-tier-price, .ca-pack-card{ transition:none; } }