/* ============================================================
   CLOURA · página nueva (alternativa B «Papel primero», nov 2026)
   Tokens vigentes de cloura.ai + lo que en Claude Design era runtime.
   ============================================================ */
@font-face{font-family:'Satoshi';src:url('/fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrainsmono.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root {
  color-scheme: dark;

  /* ── Marca · equity teal ── */
  --brand:        #17C4AC;   /* acento sobre oscuro */
  --brand-hi:     #45E0C8;   /* hover / énfasis */
  --brand-deep:   #0B9D8E;   /* hex histórico de marca */
  --brand-ink:    #04231F;   /* texto sobre --brand */
  --brand-dim:    rgba(23,196,172,.13);
  --brand-line:   rgba(23,196,172,.32);

  /* ── Superficies (dark-first) ── */
  --bg:           #08090A;
  --bg-1:         #0B0D0E;
  --surface:      #101314;
  --surface-2:    #161A1B;
  --overlay:      #1F2526;

  /* ── Tinta ── */
  --ink:          #EDF1F0;
  --ink-2:        #A2AEAB;
  --ink-3:        #7C8785;   /* AA 5.37:1 sobre --bg (era #6A7573 = 4.18:1) */

  /* ── Líneas ── */
  --hairline:     rgba(237,241,240,.09);
  --hairline-2:   rgba(237,241,240,.18);
  --grid-line:    rgba(237,241,240,.045);

  /* ── Plata de titular ──
     Segundo acento de la identidad, junto al teal: un plateado frío con una gota
     de verde-azul para que sea pariente de --brand y no un gris neutro cualquiera.
     El brillo se consigue con tres paradas (borde apagado → luz → borde apagado),
     que es como se lee un metal pulido; no con un color plano más claro. */
  --silver:     #C9D6DA;   /* borde del degradado, y color de respaldo */
  --silver-hi:  #F7FCFF;   /* la luz que recorre el texto */
  --silver-lo:  #A8BAC0;   /* sombra del metal */

  /* ── Semántica ── */
  --crit: #FF6152;  --crit-dim: rgba(255,97,82,.13);
  --high: #F2A93B;  --high-dim: rgba(242,169,59,.13);
  --ok:   #35C98C;  --ok-dim:   rgba(53,201,140,.13);

  /* ── Tipografía ── */
  --font-sans: "Satoshi","Helvetica Neue",Helvetica,system-ui,sans-serif;
  --font-mono: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --d1: clamp(40px,5vw,72px);     /* 700 · lh 1.02 · ls -.032em */
  --d2: clamp(30px,3.4vw,46px);   /* 700 · lh 1.06 · ls -.028em */
  --d3: clamp(22px,2vw,28px);     /* 700 · lh 1.14 · ls -.02em  */
  --t1: 20px;                     /* 500 · lh 1.30 */
  --t2: 17px;                     /* 400 · lh 1.65 */
  --body: 16px;  --body-sm: 14.5px;  --micro: 11px;

  /* ── Espaciado · base 4 ── */
  --s1:4px;  --s2:8px;   --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px;  --s9:96px; --s10:128px; --s11:160px;

  /* ── Radios ── */
  --r1:6px; --r2:10px; --r3:14px; --r4:20px; --r5:28px; --r-pill:999px;

  /* ── Elevación ── */
  --e1: inset 0 1px 0 rgba(255,255,255,.04);
  --e2: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -8px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.04);
  --e3: 0 2px 4px rgba(0,0,0,.4), 0 40px 80px -24px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(255,255,255,.05);
  --glow: 0 0 0 1px var(--brand-line), 0 0 60px -12px rgba(23,196,172,.45);

  /* ── Movimiento ── */
  --dur-1:120ms; --dur-2:180ms; --dur-3:280ms; --dur-4:420ms; --dur-5:720ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,0,.35,1);
  --ease-in:  cubic-bezier(.5,0,1,1);

  /* ── Layout ── */
  /* Núcleo del isotipo: diámetro único de todo indicador vivo. */
  --core: 7px;

  --maxw: 1240px;
  --gutter: clamp(20px,4vw,56px);

  /* ── Alias de compatibilidad (no romper styles.css actual) ── */
  --accent: var(--brand);           --accent-ink: var(--brand-ink);
  --accent-strong: var(--brand-hi); --accent-soft: var(--brand-dim);
  --accent-line: var(--brand-line);
  --bg-soft: var(--bg-1);           --bg-sunken: var(--surface-2);
  --text: var(--ink);               --text-2: var(--ink-2);  --text-3: var(--ink-3);
  --border: var(--hairline);        --border-strong: var(--hairline-2);
  --risk: var(--crit);              --warn: var(--high);
  --shadow-sm: var(--e1);           --shadow-md: var(--e2);  --shadow-lg: var(--e3);
  --r-sm: var(--r2);                --r-md: var(--r3);       --r-lg: var(--r4);  --r-xl: var(--r5);
  --font-display: var(--font-sans); --font-body: var(--font-sans);
  --ease: var(--ease-out);
}

[data-theme="light"] {
  color-scheme: light;
  --brand:      #0B9D8E;
  --brand-hi:   #07786C;
  --brand-ink:  #FFFFFF;
  --brand-dim:  rgba(11,157,142,.09);
  --brand-line: rgba(11,157,142,.28);

  --bg:        #FAFAF9;
  --bg-1:      #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F4F5F4;
  --overlay:   #FFFFFF;

  --ink:   #0A1413;
  --ink-2: #4C5856;
  --ink-3: #5F6B69;   /* AA 4.6:1 sobre --bg */

  --hairline:   rgba(10,20,19,.10);
  --hairline-2: rgba(10,20,19,.18);
  --grid-line:  rgba(10,20,19,.05);

  /* La plata sobre papel se invierte: el metal claro desaparecería sobre --bg.
     Mismo gesto (luz al centro), pero en grafito, para conservar el contraste AA. */
  --silver:     #56666C;
  --silver-hi:  #7C8E95;
  --silver-lo:  #33454B;

  --crit: #C33B26;  --crit-dim: rgba(195,59,38,.08);
  --high: #8A5D06;  --high-dim: rgba(156,106,8,.09);
  --ok:   #0A6B43;  --ok-dim:   rgba(12,122,77,.08);

  --e1: inset 0 1px 0 rgba(255,255,255,.6);
  --e2: 0 1px 2px rgba(10,20,19,.04), 0 8px 24px -6px rgba(10,20,19,.08);
  --e3: 0 1px 3px rgba(10,20,19,.05), 0 30px 60px -20px rgba(10,20,19,.18);
  --glow: 0 0 0 1px var(--brand-line), 0 0 50px -14px rgba(11,157,142,.35);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1:1ms; --dur-2:1ms; --dur-3:1ms; --dur-4:1ms; --dur-5:1ms; }
}

/* ============================================================
   BASE · reinicios de página y tema oscuro anidable
   ============================================================ */
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:#FAFAF9;color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,video{max-width:100%}
a{color:inherit}
a:hover{color:var(--accent-text)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
button{font-family:inherit}
[hidden]{display:none!important}
/* Texto y botones de acento con contraste AA en cada tema */
:root,[data-theme="dark"]{--cta:#17C4AC;--cta-hi:#45E0C8;--cta-ink:#04231F;--accent-text:#17C4AC}
[data-theme="light"]{--cta:#07786C;--cta-hi:#065F56;--cta-ink:#FFFFFF;--accent-text:#07786C}
/* Ventana oscura dentro de una sección en papel */
[data-theme="dark"]{color-scheme:dark;
  --brand:#17C4AC;--brand-hi:#45E0C8;--brand-ink:#04231F;--brand-dim:rgba(23,196,172,.13);--brand-line:rgba(23,196,172,.32);
  --bg:#08090A;--bg-1:#0B0D0E;--surface:#101314;--surface-2:#161A1B;--overlay:#1F2526;
  --ink:#EDF1F0;--ink-2:#A2AEAB;--ink-3:#7C8785;
  --hairline:rgba(237,241,240,.09);--hairline-2:rgba(237,241,240,.18);--grid-line:rgba(237,241,240,.045);
  --silver:#C9D6DA;--silver-hi:#F7FCFF;--silver-lo:#A8BAC0;
  --crit:#FF6152;--high:#F2A93B;--ok:#35C98C;
  --e1:inset 0 1px 0 rgba(255,255,255,.04);
  --e2:0 1px 2px rgba(0,0,0,.4),0 10px 30px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  --e3:0 2px 4px rgba(0,0,0,.4),0 40px 80px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.saltar{position:absolute;left:12px;top:-60px;z-index:300;background:var(--cta);color:var(--cta-ink);padding:12px 16px;border-radius:var(--r2);font:700 14px/1 var(--font-sans);text-decoration:none}
.saltar:focus{top:12px;color:var(--cta-ink)}

/* ============================================================
   BARRA DE NAVEGACIÓN · escritorio sobre 1100 px, menú debajo
   ============================================================ */
.barra{transition:background-color var(--dur-3) var(--ease-out),color var(--dur-3) var(--ease-out)}
.solo-escritorio-nav{display:flex}
.solo-movil-nav{display:none}
.menu-boton .menu-cerrar{display:none}
.menu-boton[aria-expanded="true"] .menu-abrir{display:none}
.menu-boton[aria-expanded="true"] .menu-cerrar{display:inline}
#menu-movil:not([hidden]){display:flex}
@media (max-width:1100px){
  .solo-escritorio-nav{display:none}
  .solo-movil-nav{display:inline-flex;align-items:center;justify-content:center}
}
@media (min-width:1101px){#menu-movil{display:none!important}}
.idiomas button{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--ink-3);cursor:pointer}
.idiomas button[aria-pressed="true"]{color:var(--ink)}
.idiomas button:hover,.idiomas button:focus-visible{color:var(--ink)}

/* ============================================================
   HERO · la captura derecha no cabe en teléfono
   ============================================================ */
@media (max-width:700px){.oculto-telefono{display:none!important}}

/* ============================================================
   REPRODUCTOR · tarjeta (el núcleo de 7 px crece y aparece el play)
   ============================================================ */
.rep-bucle{opacity:0;transition:opacity var(--dur-5) var(--ease-out)}
.rep-bucle.activo{opacity:1}
.rep-nucleo{position:relative;width:7px;height:7px;border-radius:50%;background:#17C4AC;transition:transform var(--dur-3) var(--ease-out)}
.rep-flecha{position:absolute;left:50%;top:50%;width:0;height:0;border-left:12px solid #04231F;border-top:8px solid transparent;border-bottom:8px solid transparent;margin:-8px 0 0 -4px;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.rep-boton:hover .rep-nucleo,.rep-boton:focus-visible .rep-nucleo{transform:scale(6.4)}
.rep-boton:hover .rep-flecha,.rep-boton:focus-visible .rep-flecha{opacity:1}
.rep-boton:focus-visible{outline-offset:-4px}
/* El rótulo REPRODUCIR lleva fondo propio: sobre un video en movimiento se perdía entre la interfaz */
.rep-boton>span:last-child{background:rgba(8,9,10,.78);padding:6px 9px;border-radius:var(--r1)}

/* Hero: el video crece al hacer scroll (cloura.js) y el núcleo late para invitar a reproducir.
   El latido es el único indicador vivo de la página; se apaga con el cursor encima y con movimiento reducido. */
.hero-video{transform:scale(.92);transform-origin:50% 30%;will-change:transform}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(23,196,172,.6)}70%{box-shadow:0 0 0 14px rgba(23,196,172,0)}100%{box-shadow:0 0 0 0 rgba(23,196,172,0)}}
.rep-hero .rep-nucleo{animation:latido 2.2s cubic-bezier(.16,1,.3,1) infinite}
.rep-hero .rep-boton:hover .rep-nucleo,.rep-hero .rep-boton:focus-visible .rep-nucleo{animation:none}
@media (prefers-reduced-motion:reduce){.hero-video{transform:none!important}.rep-hero .rep-nucleo{animation:none}}

/* Capítulos del video 2 bajo la tarjeta: abren el visor en ese minuto */
.capitulo{display:flex;gap:12px;align-items:baseline;width:100%;padding:0;margin:0;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.capitulo:hover,.capitulo:focus-visible{color:var(--ink)}

/* ============================================================
   VISOR · un solo diálogo para los cuatro videos
   ============================================================ */
.visor{position:fixed;inset:0;z-index:200;background:rgba(8,9,10,.92);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;padding:clamp(10px,3vw,40px);opacity:0;transition:opacity var(--dur-3) var(--ease-out);color:var(--ink);font-family:var(--font-sans)}
.visor.visible{opacity:1}
/* margin:auto centra el panel cuando cabe; si no cabe, queda arriba y el visor se desplaza */
.visor-panel{margin:auto 0;width:min(1180px,100%,calc((100vh - 250px) * 1.7778));min-width:min(100%,300px);display:flex;flex-direction:column;gap:12px;transition:transform var(--dur-4) var(--ease-out)}
.visor-panel.con-capitulos{width:min(1180px,100%,calc((100vh - 370px) * 1.7778))}
.visor-cabecera{display:flex;align-items:center;justify-content:space-between;gap:16px}
.visor-titulo{margin:0;font:500 12px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.visor-boton{min-height:44px;padding:0 12px;background:transparent;border:1px solid var(--hairline-2);border-radius:var(--r2);color:var(--ink);font:500 12px/1 var(--font-mono);letter-spacing:.08em;cursor:pointer;flex:none}
.visor-boton:hover{border-color:var(--ink-2)}
.visor-escena{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--hairline-2);border-radius:var(--r3);overflow:hidden}
.visor-video{width:100%;height:100%;display:block;background:#000}
.visor-video::cue{font-family:var(--font-sans);background:rgba(8,9,10,.78)}
.visor-no-disponible{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
.visor-no-disponible img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.visor-controles{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font:500 12px/1 var(--font-mono);letter-spacing:.06em;color:var(--ink-2)}
.visor-play{min-width:104px;min-height:44px;padding:0 14px;background:var(--cta);color:var(--cta-ink);border:0;border-radius:var(--r2);font:700 12px/1 var(--font-mono);letter-spacing:.1em;cursor:pointer}
.visor-barra{position:relative;flex:1 1 240px;min-width:160px;display:flex;align-items:center}
.visor-barra input{width:100%;height:44px;margin:0;accent-color:#17C4AC}
.visor-marca{position:absolute;top:14px;bottom:14px;width:2px;background:#EDF1F0;pointer-events:none}
.visor-tiempo{color:var(--ink);white-space:nowrap}
.visor-vol{display:flex;align-items:center;gap:8px}
.visor-vol input{width:84px;height:44px;margin:0;accent-color:#17C4AC}
.visor-capitulos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:8px}
.visor-capitulos button{width:100%;min-height:44px;text-align:left;padding:10px 12px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r2);color:var(--ink);font:500 13.5px/1.3 var(--font-sans);cursor:pointer;display:flex;gap:10px;align-items:baseline}
.visor-capitulos button:hover,.visor-capitulos button[aria-current="true"]{border-color:var(--brand-line)}
.visor-capitulos .hora{font:500 12px/1 var(--font-mono);color:var(--accent-text)}
@media (max-width:700px){.visor-vol{display:none}}

/* ============================================================
   PRECIOS · en teléfono se ve un plan a la vez (Scale por defecto)
   ============================================================ */
.solo-movil-precios{display:none!important}
.planes-selector button{background:transparent;color:var(--ink)}
.planes-selector button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
@media (max-width:700px){
  .solo-movil-precios{display:grid!important}
  .precios[data-plan-movil="growth"] article[data-plan]:not([data-plan="growth"]),
  .precios[data-plan-movil="scale"] article[data-plan]:not([data-plan="scale"]),
  .precios[data-plan-movil="enterprise"] article[data-plan]:not([data-plan="enterprise"]){display:none!important}
}

/* ============================================================
   HOVER · lo que en el diseño era style-hover (gana al estilo en línea)
   ============================================================ */
.hv1:hover,.hv1:focus-visible{color:var(--ink)!important}
.hv2:hover,.hv2:focus-visible{background:var(--cta-hi)!important;color:var(--cta-ink)!important}
.hv3:hover,.hv3:focus-visible{border-color:var(--brand)!important}
.hv4:hover,.hv4:focus-visible{background:var(--ink)!important;color:var(--bg)!important}
.visor-cta:hover,.visor-cta:focus-visible{background:var(--cta-hi)!important;color:var(--cta-ink)!important}

/* ============================================================
   LUPA · ampliación de las capturas reales (clic, Enter o espacio)
   ============================================================ */
.ampliable{cursor:zoom-in}
.ampliable:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.lupa{position:fixed;inset:0;z-index:210;background:rgba(8,9,10,.95);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;padding:clamp(12px,3vw,40px);opacity:0;transition:opacity var(--dur-3) var(--ease-out);color:var(--ink);font-family:var(--font-sans);cursor:zoom-out}
.lupa.visible{opacity:1}
.lupa-panel{margin:auto 0;display:flex;flex-direction:column;gap:12px;transition:transform var(--dur-4) var(--ease-out);cursor:default}
.lupa-cabecera{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lupa-pie{margin:0;font:500 12px/1.45 var(--font-mono);letter-spacing:.03em;color:var(--ink-2)}
.lupa-marco{padding:6px;background:var(--surface-2);border:1px solid var(--hairline-2);border-radius:var(--r4);box-shadow:var(--e3)}
.lupa-marco img{display:block;width:100%;height:auto;border-radius:14px}
.lupa-marco.vertical{max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}
.lupa-marco:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.lupa-marco.panear{overflow-x:auto;overscroll-behavior:contain}
.lupa-marco.panear img{max-width:none}
@media (max-width:700px){.lupa-pie{font-size:11px}}

/* ============================================================
   DESCARGAS DEL REPORTE · enlaces discretos bajo las imágenes
   ============================================================ */
.descargas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 24px;padding:18px 0 clamp(56px,7vw,88px)}
.descargas-rotulo{font:500 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--ink-3)}
.descargas-separador{width:1px;height:14px;background:var(--hairline-2)}
.descarga{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--ink)}
.descarga::before{content:"↓";font:500 13px/1 var(--font-mono);color:var(--accent-text)}
.descarga-texto{font:500 15px/1.3 var(--font-sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--hairline-2);transition:text-decoration-color var(--dur-2) var(--ease-out)}
.descarga-meta{font:500 11px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-3)}
.descarga:hover,.descarga:focus-visible{color:var(--ink)}
.descarga:hover .descarga-texto,.descarga:focus-visible .descarga-texto{text-decoration-color:var(--accent-text)}
@media (max-width:560px){.descargas{flex-direction:column;gap:14px}.descargas-separador{display:none}}

/* ============================================================
   DETALLE DE LOS ADD-ONS · se despliega en la misma sección
   ============================================================ */
.detalle-addons{margin:48px 0 0;border-top:1px solid var(--hairline-2)}
.detalle-addons summary{display:inline-flex;align-items:center;gap:12px;padding:22px 0 6px;font:500 15px/1 var(--font-sans);color:var(--accent-text)}
.detalle-addons summary:hover span:first-child{text-decoration:underline;text-underline-offset:4px}
.detalle-signo{position:relative;width:12px;height:12px;flex:none}
.detalle-signo::before,.detalle-signo::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform var(--dur-3) var(--ease-out)}
.detalle-signo::after{transform:rotate(90deg)}
.detalle-addons[open] .detalle-signo::after{transform:rotate(0deg)}
.detalle-addons-cuerpo{padding:22px 0 0}
.addons-tabla{width:100%;border-collapse:collapse;font-family:var(--font-sans)}
.addons-tabla caption{text-align:left;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:0 0 14px}
.addons-tabla thead th{font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:0 16px 12px 0;border-bottom:1px solid var(--hairline-2)}
.addons-tabla thead th:not(:first-child){width:13%}
.addons-tabla tbody th{text-align:left;font-weight:400;padding:18px 24px 18px 0;border-bottom:1px solid var(--hairline);vertical-align:top}
.addons-tabla tbody th strong{display:block;font:700 16px/1.3 var(--font-sans);color:var(--ink);margin-bottom:4px}
.addons-tabla tbody th span{display:block;font:400 14.5px/1.55 var(--font-sans);color:var(--ink-2);max-width:46em}
.addons-tabla td{padding:20px 16px 18px 0;border-bottom:1px solid var(--hairline);vertical-align:top;font:500 13px/1.3 var(--font-mono);color:var(--ink-3)}
.addons-tabla td.incluido{color:var(--ink)}
.addons-tabla td.incluido::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-right:8px;vertical-align:1px}
.addons-notas{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px;font:400 13.5px/1.6 var(--font-sans);color:var(--ink-3);max-width:60em}
.addons-notas li{padding-left:16px;position:relative}
.addons-notas li::before{content:"·";position:absolute;left:4px;color:var(--ink-3)}
@media (max-width:700px){
  .addons-tabla thead{display:none}
  .addons-tabla caption{display:block;width:100%}
  .addons-tabla,.addons-tabla tbody,.addons-tabla tr{display:block}
  .addons-tabla tr{padding:16px 0;border-bottom:1px solid var(--hairline)}
  .addons-tabla tbody th{display:block;padding:0 0 12px;border:0}
  .addons-tabla td{display:inline-block;padding:0 14px 0 0;border:0}
  .addons-tabla td.incluido::before,.addons-tabla td.addon::before{content:attr(data-plan) " ";display:inline;width:auto;height:auto;background:none;border-radius:0;margin-right:4px;color:var(--ink-3)}
  .addons-tabla td.incluido{color:var(--accent-text)}
}