/* Ajustes de la maqueta sobre el design-system real: sólo lo que el sitio todavía no tiene. */
.v2-menu{display:none;min-height:44px;padding:0 12px;border:1px solid var(--sf-line);border-radius:var(--sf-r-s,8px);background:transparent;font:inherit;font-weight:600;color:inherit}
.v2-sheet .sf-portal-in{display:grid;gap:2px;padding-block:8px}
.v2-sheet a{padding:12px 0;border-bottom:1px solid var(--sf-line);text-decoration:none;font-weight:500;min-height:44px;display:flex;align-items:center}
.v2-idioma{font-weight:600}
@media (max-width:999px){ .sf-portal-nav,.sf-portal-entrar,.v2-idioma{display:none!important} .v2-menu{display:inline-flex;align-items:center} }
.sf-portal-cab{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--sf-paper,#fff)}
.v2-hero-corto{padding:48px 0 40px}
.v2-hero-corto .wrap{grid-template-columns:1fr!important}
.v2-bajar{margin-top:22px}
.v2-bajar a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;color:var(--sf-brand)}
.v2-cap{display:grid;gap:10px;align-content:space-between}
.v2-cap p{margin:0}
.v2-n{color:var(--sf-mut)}
.v2-tres{margin:10px 0 0;padding-left:18px;color:var(--sf-mut);display:grid;gap:6px}
.v2-serie{margin:0;padding-left:20px;display:grid;gap:8px;max-width:48ch}
.v2-scroll{overflow-x:auto}
.v2-table{width:100%;border-collapse:collapse;font-size:15px}
.v2-table th,.v2-table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--sf-line);vertical-align:top}
.v2-table th{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sf-mut)}
.v2-details{margin-top:16px}
.v2-details summary{cursor:pointer;font-weight:600}
.v2-details ul{margin:10px 0 0;padding-left:18px;color:var(--sf-mut);display:grid;gap:6px}
.v2-code{font-family:var(--sf-mono,ui-monospace,monospace);font-size:12.5px;background:var(--sf-soft);border:1px solid var(--sf-line);border-radius:var(--sf-r-s,8px);padding:12px;overflow-x:auto;white-space:pre;margin:12px 0}
.v2-afirmaciones{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:72ch}
.v2-afirmaciones li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--sf-line)}
.sf-card img{display:block;width:100%;height:auto;margin-bottom:12px}
.v2-ruler{position:fixed;left:0;right:0;bottom:0;padding:7px 20px;padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));background:var(--sf-ink,#241B2E);color:#fff;font:12px/1.3 ui-monospace,monospace;z-index:30}
body{padding-bottom:48px}
.sechead p{color:var(--sf-mut)}

/* v3: correcciones de la ronda 4 */
.v2-hero-corto h1{max-width:none}
.v2-hero-corto h1 em{white-space:normal}
@media (max-width:760px){ .hero h1 em{white-space:normal} }
.sechead p{color:var(--sf-ink)}
.sechead p + p{margin-top:10px}
.band{background:var(--sf-paper)}
.band.soft{background:var(--sf-soft)}
.cta.centro{justify-content:center}
.sechead.centro{text-align:center;margin-inline:auto}
.v3-cap{display:grid;gap:8px;align-content:start}
.v3-cap h4{margin:0;font-size:var(--sf-fs-16,16px);line-height:1.3}
.v3-cap p{margin:0;color:var(--sf-mut);font-size:var(--sf-fs-15,15px)}
.v3-cap-pie{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:4px;font-size:14px}
.v3-inv .sf-card h4{font-weight:700}
.v3-api{margin:22px 0}
.v3-api .api-maqueta{max-width:720px}
.v3-afirmaciones{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:76ch}
.v3-afirmacion{padding:16px 0;border-bottom:1px solid var(--sf-line);display:grid;gap:8px}
.v3-af-cab{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.v3-af-cab h3{margin:0;font-size:var(--sf-fs-18,18px)}
.v3-afirmacion p{margin:0}
.band .split .txt p.d, .band .lista li, .pasos .paso p{color:var(--sf-ink)}

/* v4 */
.v4-cmp th{font-weight:700;color:var(--sf-ink);text-transform:none;letter-spacing:0;font-size:15px;vertical-align:top}
.v4-cmp thead th{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sf-mut)}
.v4-busca{display:grid;gap:10px;max-width:72ch}
.v4-busca label{font-weight:700}
.v4-busca input{min-height:44px;padding:0 14px;border:1px solid var(--sf-line);border-radius:var(--sf-r-s,8px);font:inherit;background:var(--sf-paper)}
.v4-filtros{display:flex;flex-wrap:wrap;gap:8px}
.v4-filtros button{min-height:40px;padding:0 14px;border:1px solid var(--sf-line);border-radius:999px;background:transparent;font:inherit;font-weight:600;color:inherit}
.v4-filtros button[aria-pressed="true"]{background:var(--sf-brand);color:#fff;border-color:var(--sf-brand)}
.v3-cap p b{font-weight:600;color:var(--sf-ink)}
.band.corta .sechead{margin-bottom:12px}
.v2-serie li a{color:var(--sf-brand)}

/* v6 */
/* B. las tablas de comparación se apilan en el teléfono: cada fila es una tarjeta con sus columnas nombradas */
@media (max-width:760px){
  .v6-apila thead{display:none}
  .v6-apila,.v6-apila tbody,.v6-apila tr,.v6-apila td,.v6-apila th{display:block;width:100%;box-sizing:border-box}
  .v6-apila tr{padding:12px 0;border-bottom:1px solid var(--sf-line)}
  .v6-apila tr>:first-child{font-weight:700;padding:0 0 6px;border:0;color:var(--sf-ink);text-transform:none;letter-spacing:0;font-size:15px}
  .v6-apila td{padding:3px 0;border:0}
  .v6-apila td[data-col]::before{content:attr(data-col) ": ";font-weight:600;color:var(--sf-mut)}
  .v2-scroll{overflow:visible}
}
/* C. el índice local de Product queda pegado bajo la cabecera también en el teléfono */
@media (max-width:999px){
  .sf-portal-seccion{display:block;position:sticky;top:var(--v3-cab,61px);z-index:19;background:var(--sf-paper,#fff);border-bottom:1px solid var(--sf-line)}
  .sf-portal-seccion .sf-portal-in{display:flex;flex-wrap:nowrap;gap:4px;white-space:nowrap;padding:6px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:none}
  .sf-portal-seccion .sf-portal-in::-webkit-scrollbar{display:none}
  .sf-portal-seccion a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:0 10px;border-radius:999px;text-decoration:none;font-weight:600;color:var(--sf-mut)}
  .sf-portal-seccion a[aria-current]{background:var(--sf-soft);color:var(--sf-brand)}
}
.v6-contacto{color:var(--sf-ink);max-width:60ch}
/* v6c: todo destino de ancla deja su título a la vista bajo cabecera + índice (regla 9) */
main [id]{scroll-margin-top:calc(var(--v3-cab,61px) + var(--v3-idx,0px) + 20px)}
/* v6d: el índice local queda pegado bajo la cabecera en todo ancho, no sólo en el teléfono */
.sf-portal-seccion{position:sticky;top:var(--v3-cab,61px);z-index:19}

/* v7 */
/* numeración heredada del sitio viejo: chip 01–04 en cada paso, en vez del numeral tenue */
.paso{padding-top:0}
.paso .n{position:static;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--sf-acc-50);color:var(--sf-acc-700);font-size:15px;font-weight:700;letter-spacing:0;line-height:1;margin-bottom:12px}
/* el bloque de espacios de trabajo del tour viejo, con sus iconos */
.workspace-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.workspace-card{background:var(--sf-paper);border:1px solid var(--sf-line);border-radius:var(--sf-r-l,16px);padding:28px 28px 24px;display:grid;gap:10px;align-content:start;box-shadow:0 1px 2px rgba(36,27,46,.04)}
.workspace-card .sf-ico{width:56px;height:56px;border-radius:14px;background:var(--sf-soft);display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px}
.workspace-card .sf-ico svg{width:24px;height:24px;fill:none;stroke:var(--sf-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.workspace-card h3{margin:0;font-size:var(--sf-fs-20,20px)}
.workspace-card p{margin:0;color:var(--sf-mut)}
.workspace-card .text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--sf-brand);font-weight:600;text-decoration:none}
/* contacto */
.v7-contacto{display:grid;gap:10px;max-width:60ch}
.v7-contacto p{margin:0}
.v7-dato{color:var(--sf-mut);font-style:italic}

/* v7b: herencia del sitio viejo (ronda 6 de Codex) */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--sf-ink);color:#fff;padding:10px 14px;border-radius:8px;font-weight:600}
.skip-link:focus{left:16px;outline:2px solid var(--sf-acc);outline-offset:2px}
.v7-cab{padding:40px 0 8px}
.v7-cab .wrap{display:block}
.v7-cab .kicker{margin:0 0 8px}
.v7-cab h1{font-size:clamp(26px,4vw,34px);line-height:1.15;margin:0 0 10px;font-weight:800;letter-spacing:-.01em;max-width:28ch}
.v7-cab .sf-portal-lead{color:var(--sf-mut);font-size:17px;margin:0 0 8px;max-width:62ch}
.v7-fam{display:flex;align-items:center;gap:14px}
.v7-fam-ico{flex:none;width:44px;height:44px;border-radius:12px;background:var(--sf-soft);display:inline-flex;align-items:center;justify-content:center}
.band.soft .v7-fam-ico{background:var(--sf-paper)}
.v7-fam-ico svg{width:22px;height:22px;fill:none;stroke:var(--sf-brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.v3-cap .sf-fn-estado{margin:0 0 4px}
.v7-rc{display:grid;gap:8px;align-content:start;text-decoration:none;color:inherit}
.v7-rc h3{margin:0}
.v7-rc p{margin:0;color:var(--sf-mut)}
.v7-rc-tipo{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sf-mut);font-weight:600}
.v7-rc-accion{margin-top:auto;padding-top:8px;color:var(--sf-brand);font-weight:600}
.v7-rc:hover .v7-rc-accion,.v7-rc:focus-visible .v7-rc-accion{text-decoration:underline}
.workspace-card.sf-levanta{transition:.18s}
.workspace-card.sf-levanta:hover,.workspace-card.sf-levanta:focus-within{transform:translateY(-3px);box-shadow:var(--sf-sombra-flota,0 10px 30px rgba(36,27,46,.10))}
.v7-para{margin:4px 0 10px;color:var(--sf-ink)}
.v7-para b{color:var(--sf-brand)}
.v7-cond{margin:0}
.v7-recetas{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.v7-recetas .sf-card{display:grid;gap:8px;align-content:start}
.v7-recetas .sf-card h3{margin:0;font-size:var(--sf-fs-18,18px)}
.v7-recetas .sf-card p{margin:0}
.v7-recetas .sf-camino-que{color:var(--sf-mut)}
@media (prefers-reduced-motion:reduce){.workspace-card.sf-levanta,.workspace-card.sf-levanta:hover{transition:none;transform:none}}

/* v7c: hallazgos del cuarto revisor */
/* #3 la tarjeta de evidencia de la escena de la API no flota sobre la tarjeta siguiente */
.v3-api .api-evidencia{position:static!important;width:auto!important;margin:14px 0 0!important;left:auto!important;top:auto!important}
.v3-api .api-maqueta{padding-bottom:0}
.v3-api{margin-bottom:28px}
/* #10 el titular del hero no deja una palabra sola */
.hero h1{text-wrap:balance}
/* #11 la regla de la maqueta es una pastilla chica abajo a la derecha, no una barra que tapa texto */
.v2-ruler{left:auto;right:12px;bottom:12px;max-width:min(62%,520px);padding:5px 10px;border-radius:8px;font-size:11px;line-height:1.3;opacity:.92;pointer-events:none}
body{padding-bottom:24px}
/* #12 la tira de familias insinúa que sigue: un desvanecido en el borde derecho */
@media (max-width:999px){ .sf-portal-seccion::after{content:"";position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,rgba(255,255,255,0),var(--sf-paper,#fff));pointer-events:none} }
/* #4 la nota de idioma en la hoja del menú */
.v2-idioma-nota{padding:12px 0;color:var(--sf-mut);font-weight:500;min-height:44px;display:flex;align-items:center}
/* v7d: el titular del hero en tres líneas en escritorio */
@media (min-width:1000px) and (max-width:1439px){ .hero h1{max-width:20ch;font-size:50px} }
@media (min-width:1440px){ .hero h1{max-width:20ch} }
/* v7e-evid: Walter 16-10: la tarjeta de evidencia del hero quedaba pegada al texto de la izquierda (left:-40px); en escritorio se corre 52 px a la derecha */
@media (min-width:1000px){ .hero .flot-evid{left:12px} }
/* v7f-escena: retirado el 16-10 14:4x: la escena del hero cambió (v7g) y ya no hay tres piezas apiladas */
/* v7g: el camino de firma en el hero (con la tarjeta de evidencia flotando) y el documento con campos en «Fill in before signing» */
.v7-hero-camino{padding:24px 10px 64px;max-width:440px;margin-inline:auto}
.v7-hero-camino .camino{width:100%}
.v7-doc-solo{padding:10px 0;perspective:none}
.v7-doc-solo .doc{transform:none;margin:0 auto}
/* la evidencia va debajo del camino, apenas montada sobre su borde inferior (el relleno), nunca sobre un renglón */
.v7-hero-camino{padding:24px 10px 24px}
.v7-hero-camino .flot-evid{position:static!important;width:250px!important;margin:-16px 0 0 auto!important;top:auto!important;left:auto!important;bottom:auto!important;right:auto!important;position:relative!important;z-index:2}
@media (max-width:999px){ .hero .maq.v7-hero-camino{zoom:1;width:auto;max-width:440px;padding:16px 0 8px} }
/* v7h: el bloque «Where it fits» con dos tarjetas con icono y las tres formas de correrlo como pastillas (Walter 16-10) */
.v7-enc{display:grid;gap:10px;align-content:start}
.v7-enc h3{margin:0;font-size:var(--sf-fs-20,20px)}
.v7-enc p{margin:0;color:var(--sf-ink)}
.v7-enc-ways{margin:22px 0 0;color:var(--sf-ink);display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.v7-enc-ways .sf-pill{font-weight:600}
.v7-enc-nota{flex-basis:100%;color:var(--sf-mut);font-size:var(--sf-fs-15,15px)}
/* v7i: el bloque Learn de la portada lleva una imagen vectorial de la colección Rúbrica (Walter 16-10) */
.v7-aprender{display:grid;gap:28px;align-items:center}
.v7-aprender-img{display:block;width:100%;max-width:520px;margin:0 auto}
.v7-aprender-img img{display:block;width:100%;height:auto;margin:0!important}
/* Walter 16-10: en escritorio la imagen a la izquierda y el texto a la derecha */
@media (min-width:900px){ .v7-aprender{grid-template-columns:1fr 1fr;gap:56px} .v7-aprender-img{order:-1;max-width:none} }
.v7-aprender-img svg{display:block;width:100%;height:auto}
.v7-aprender-img:hover svg,.v7-aprender-img:focus-visible svg{transform:translateY(-2px)}
.v7-aprender-img svg{transition:transform .18s}
/* v7k (Walter 16-10, «¿falta una línea ahí?»): la tabla de comparación lleva su línea de arriba, como las tablas del sitio viejo */
.v2-table thead th{border-top:1px solid var(--sf-line)}
@media (max-width:760px){ .v6-apila tr:first-child{border-top:1px solid var(--sf-line)} }
/* v7l (Walter 16-10): las secciones alternan fondo; si dos seguidas comparten fondo, las separa una línea */
.band.soft + .band.soft, .band:not(.soft) + .band:not(.soft){border-top:1px solid var(--sf-line)}
/* v7m: en el teléfono la pieza de Learn se queda con los libros y la rúbrica; los chips y el rótulo se irían a 8 px (letra chica) y se ocultan */
@media (max-width:520px){ .v7-aprender-img .lrn-chips, .v7-aprender-img .lrn-rotulo{display:none} .v7-aprender-img{max-width:300px} }
/* v7n: la escena del hero es una sola ilustración vectorial */
.hero .wrap > .maq.v7-hero-escena{padding:0;width:100%;max-width:620px;min-width:0;justify-self:stretch;margin:0 auto}
.hero .maq.v7-hero-escena > svg{display:block;width:100%!important;height:auto!important;max-width:none!important}
@media (max-width:999px){ .hero .maq.v7-hero-escena{padding:8px 0 0} }
/* v7o: en el teléfono la escena del hero muestra el documento con los tres firmantes encima; el camino y el registro se ocultan */
#hero-escena .h-path-m{display:none}
@media (max-width:520px){ #hero-escena .h-path, #hero-escena .h-record, #hero-escena .h-signed{display:none} #hero-escena .h-path-m{display:block} .hero .wrap > .maq.v7-hero-escena{max-width:360px} }
/* v7p: el hero vuelve al documento con campos; en el teléfono sólo el documento (una imagen); «Fill in» con la escena de los campos; el registro de «The proof» en tarjeta blanca, no bordó */
@media (max-width:999px){ .hero .maq .flot{display:none!important} .hero .maq{padding:16px 0 8px} }
.v7-campos{padding:0;perspective:none;max-width:520px;margin:0 auto}
.band .v7-campos > svg{display:block;width:100%;height:auto}
/* el registro de «The proof» queda como en el sitio vivo (tarjeta violeta): Walter 16-10 16:28, «este debe estar como antes» */
/* v7r: hero = variante A atrás + la tarjeta del registro adelante; en el teléfono sólo la escena A sin chips */
.hero .wrap > .maq.v7-hero-a{position:relative;padding:0 0 44px;width:100%;max-width:560px;min-width:0;justify-self:stretch;margin:0 auto;perspective:none}
.hero .maq.v7-hero-a > svg{display:block;width:100%!important;height:auto!important;max-width:none!important}
.hero .maq.v7-hero-a .flot-evid{position:absolute!important;left:0!important;bottom:0!important;width:236px!important;display:block!important}
@media (max-width:999px){ .hero .wrap > .maq.v7-hero-a{padding:8px 0 0} .hero .maq.v7-hero-a .flot-evid{display:none!important} } /* v7v: la regla de escritorio (.wrap >) ganaba por especificidad y dejaba 44 px de hueco en el teléfono (H13 del 4.º de #1156) */
@media (max-width:520px){ #hero-escena-a .a-chip{display:none} #hero-escena-a{overflow:hidden} }
/* v7u (m3 midió, Fable decidió 16-10 noche): donde la tarjeta absoluta taparía un chip o una inicial (1000–1140 y ≥1440) va en flujo debajo de la escena; entre 1160 y 1420 sólo roza la rúbrica, por diseño */
@media (min-width:1000px) and (max-width:1140px), (min-width:1440px){ .hero .wrap > .maq.v7-hero-a{padding-bottom:0} .hero .maq.v7-hero-a .flot-evid{position:static!important;margin-top:12px} }
/* v7s (Walter 16-10 17:08 y 20:35): la sección «How people sign» en modo oscuro, con un enlace a la doctrina en Learn; la tabla sobre un panel translúcido */
.band.v7-oscura{background:var(--sf-ink,#241B2E);color:#fff}
.band.v7-oscura .kicker{color:#F5B3DE}
.band.v7-oscura h2{color:#fff}
.band.v7-oscura .sechead p, .band.v7-oscura p, .band.v7-oscura .lista li, .band.v7-oscura .split .txt p.d{color:rgba(255,255,255,.86)}
.band.v7-oscura .v2-bajar a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.band.v7-oscura .v2-bajar + .v2-bajar{margin-top:6px}
.band.v7-oscura .v2-scroll{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:6px 18px 10px;margin:28px 0 26px}
.band.v7-oscura .v2-table th, .band.v7-oscura .v2-table td{border-bottom-color:rgba(255,255,255,.14);color:rgba(255,255,255,.86)}
.band.v7-oscura .v2-table tbody tr:last-child th, .band.v7-oscura .v2-table tbody tr:last-child td{border-bottom:0}
.band.v7-oscura .v4-cmp th{color:#fff}
.band.v7-oscura .v4-cmp thead th{color:#F5B3DE;border-top:0;border-bottom-color:rgba(255,255,255,.28)}
.band.v7-oscura + .band:not(.soft), .band:not(.soft) + .band.v7-oscura{border-top:0}
@media (max-width:760px){
  .band.v7-oscura .v2-scroll{padding:4px 16px}
  .band.v7-oscura .v6-apila tr{border-bottom-color:rgba(255,255,255,.14)}
  .band.v7-oscura .v6-apila tr:first-child{border-top:0}
  .band.v7-oscura .v6-apila tr:last-child{border-bottom:0}
  .band.v7-oscura .v6-apila tr>:first-child{color:#fff}
  .band.v7-oscura .v6-apila td[data-col]::before{color:#F5B3DE}
}
/* v7w (Walter 17-10 01:0x, tachadura 20): la comparación de planes es una lista por secciones con una columna por plan y cuatro círculos: relleno = incluido, medio = con un límite, circunferencia = opcional, vacío = no */
.g{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--sf-brand,#723988);box-sizing:border-box;vertical-align:-2px;flex:none}
.g-si{background:var(--sf-brand,#723988)}
.g-mitad{background:linear-gradient(90deg,var(--sf-brand,#723988) 50%,transparent 50%)}
.g-opc{background:transparent}
.g-no{border-color:transparent;background:transparent}
.ley{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;font-size:13px;color:var(--sf-mut,#6b6474)}.ley > span{display:inline-flex;align-items:center;gap:8px}
.ley .g-no{border-color:var(--sf-line,#E6E1EC)}
/* la tabla */
.cmp{table-layout:fixed}
.cmp th:first-child{width:auto}.cmp th:not(:first-child),.cmp td{width:19%;text-align:center}
.cmp thead th{position:sticky;top:0;background:var(--sf-paper,#fff);z-index:1}
.cmp tbody th[scope=row]{font-weight:500;color:var(--sf-ink,#241B2E);text-transform:none;letter-spacing:0;font-size:15px}
.cmp tr.sec th{background:var(--sf-soft,#F2F2F5);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;color:var(--sf-ink,#241B2E);padding-top:16px;border-bottom:0}
.cmp tr.sec small{font-weight:600;color:var(--sf-mut,#6b6474);letter-spacing:0;text-transform:none;font-size:12.5px}
.cmp td .q{display:block;font-size:12.5px;color:var(--sf-mut,#6b6474);margin-top:4px;line-height:1.25}
.cmp td[data-s=mitad] .q,.cmp td[data-s=opc] .q{color:var(--sf-ink,#241B2E)}
.cmp details summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
.cmp details summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--sf-mut,#6b6474);border-bottom:2px solid var(--sf-mut,#6b6474);transform:rotate(-45deg);transition:transform .15s}
.cmp details[open] summary::before{transform:rotate(45deg)}
.cmp details ul{margin:8px 0 0;padding-left:16px;color:var(--sf-mut,#6b6474);font-size:13.5px;display:grid;gap:4px;font-weight:400}
@media (max-width:640px){ .cmp th:not(:first-child),.cmp td{width:17%;padding-left:4px;padding-right:4px} .cmp td .q{font-size:11.5px} .cmp.v2-table{font-size:14px} }
/* v7x (4.º de #1156, 17-10): los tres modos de «Where it fits» son rótulos, no botones: sin borde, sombra ni hover */
.v7-enc-ways .sf-pill{border:0;box-shadow:none;background:var(--sf-soft,#F2F2F5);color:var(--sf-ink,#241B2E);cursor:default;pointer-events:none}
/* v7y (Walter 17-10 01:32, Plans): el enlace final de cada tarjeta de plan va separado de la nota y se ve como enlace: separado 18 px, en el violeta de la marca, seminegrita y subrayado */
.sf-card .v7-tarjeta-cta{margin-top:18px}
.sf-card .v7-tarjeta-cta a{color:var(--sf-brand,#723988);font-weight:600;text-decoration:none} /* v7ad (Walter 17-10 01:42): sin subrayado; sólo al pasar */
.sf-card .v7-tarjeta-cta a:hover{text-decoration:underline;text-underline-offset:4px}
/* v7z (Walter 17-10 01:33, Plans «apagadísima y flat»): cada tarjeta de plan lleva un icono en el estilo de las familias de Product, un filete de marca arriba y relieve al pasar */
.v7-plan-tarjeta{box-shadow:0 1px 2px rgba(36,27,46,.04);transition:box-shadow .15s,transform .15s}
.v7-plan-tarjeta:hover,.v7-plan-tarjeta:focus-within{box-shadow:inset 0 4px 0 var(--sf-brand,#723988),0 14px 32px rgba(36,27,46,.10);transform:translateY(-2px)} /* v7ab (Walter 17-10 01:40): el filete sólo al pasar o con foco; en reposo, nada */
.v7-plan-cab{display:flex;align-items:center;gap:12px;margin:4px 0 12px}
.v7-plan-cab .kicker{margin:0}
.v7-plan-ico{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--sf-acc-50,#FCE9F5),var(--sf-soft,#F2F2F5))}
.band.soft .v7-plan-ico{background:linear-gradient(135deg,var(--sf-acc-50,#FCE9F5),var(--sf-paper,#fff))}
.v7-plan-ico svg{width:24px;height:24px}
@media (prefers-reduced-motion:reduce){ .v7-plan-tarjeta,.v7-plan-tarjeta:hover{transition:none;transform:none} }
/* v7aa (Walter 17-10 01:36, Plans): jerarquía y espaciado de la tarjeta de plan: el título manda (26/800), después el texto (15), la lista (15), la nota chica y gris (13,5) y el enlace al final */
.sf-portal .band .cols .sf-card.v7-plan-tarjeta h3{font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.01em;margin:0 0 10px}
.v7-plan-tarjeta .v7-para{margin:0 0 12px}
.v7-plan-tarjeta > p{margin:0 0 14px}
.v7-plan-tarjeta ul.v2-tres{font-size:15px;gap:8px;margin:0 0 16px;padding-left:18px}
.v7-plan-tarjeta ul.v2-tres li::marker{color:var(--sf-brand,#723988)}
.v7-plan-tarjeta > p.sf-ayuda{font-size:13.5px;line-height:1.45;color:var(--sf-mut,#6b6474);margin:0}
.v7-plan-tarjeta > p.v7-tarjeta-cta{margin:22px 0 0}
.v7-plan-tarjeta .v7-plan-cab{margin:0 0 14px}
/* v7ae (Walter 17-10 01:47, Integrations «Two ways in»): cada vía con su imagen dentro de la tarjeta, con aire; la pastilla separada del título; sin las dos imágenes apiladas arriba */
.v7-via{display:flex;flex-direction:column;padding:28px}
.v7-via-img{margin:0 0 22px;padding:18px;border-radius:16px;background:var(--sf-soft,#F2F2F5)}
.band.soft .v7-via-img{background:var(--sf-paper,#fff)}
.v7-via-img > svg{display:block;width:100%;height:auto}
.v7-via-img .api-preview{box-shadow:none;margin:0;max-width:none;background:var(--sf-paper,#fff)}
.v7-via-img .api-preview .sf-ventana{margin-bottom:14px;padding-bottom:12px}
.v7-via > .sf-pill{align-self:start;justify-self:start;width:auto;margin:0 0 12px} /* v7ah (Walter 17-10 01:55): la pastilla del largo de su texto, no de la tarjeta */
.v7-via h3{margin:0 0 10px}
.v7-via p{margin:0}
.v7-via .cta{margin-top:auto;padding-top:18px}
@media (max-width:640px){ .v7-via{padding:20px} .v7-via-img{padding:12px;margin-bottom:16px} }
/* v7af: la receta dibujada del no-code en HTML (tres pasos con flechas); en el teléfono se apila; los pedidos de la API se parten en vez de desbordar */
.v7-receta{list-style:none;margin:0;padding:6px 0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0}
.v7-receta li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 10px;background:var(--sf-paper,#fff);border:1px solid var(--sf-line,#E6E1EC);border-radius:16px;box-shadow:0 8px 20px rgba(36,27,46,.06)}
.v7-receta li + li{position:relative}
.v7-receta li + li::before{content:"";position:absolute;left:-30px;top:50%;width:24px;height:0;border-top:2.5px dashed var(--sf-acc,#C6168D);transform:translateY(-50%)}
.v7-receta li + li::after{content:"";position:absolute;left:-12px;top:50%;width:8px;height:8px;border-right:2.5px solid var(--sf-acc,#C6168D);border-bottom:2.5px solid var(--sf-acc,#C6168D);transform:translate(0,-50%) rotate(-45deg)}
.v7-receta{grid-template-columns:1fr 1fr 1fr;column-gap:36px}
.v7-receta-k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-mut,#6b6474)}
.v7-receta-t{font-size:15px;font-weight:600;color:var(--sf-ink,#241B2E);line-height:1.25}
.v7-receta .v7-fam-ico{background:var(--sf-soft,#F2F2F5)}
.v7-via-img .api-pedidos li{flex-wrap:wrap}
.v7-via-img .api-pedidos code{white-space:normal;overflow-wrap:normal;word-break:normal;min-width:0;flex:1 1 140px} /* parte sólo en los <wbr> (las barras), nunca dentro de una palabra */
@media (max-width:640px){ .v7-via-img .api-pedidos code{font-size:12px} .v7-via-img .api-preview{padding:14px} .v7-via-img .api-pedidos li{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center} .v7-via-img .api-pedidos li code{grid-column:1/-1;flex:none;width:100%} .v7-via-img .api-pedidos .api-estado{justify-self:end} }
@media (max-width:640px){
  .v7-receta{grid-template-columns:1fr;row-gap:34px}
  .v7-receta li + li::before{left:50%;top:-30px;width:0;height:24px;border-top:0;border-left:2.5px dashed var(--sf-acc,#C6168D);transform:translateX(-50%)}
  .v7-receta li + li::after{left:50%;top:-12px;transform:translate(-50%,0) rotate(45deg)}
}
/* v7ag (Walter 17-10 01:53): la imagen de la API más baja (sin el enlace) y la imagen de la otra tarjeta con el MISMO alto: las dos tarjetas comparten las filas (subgrid) */
.v7-vias{align-items:stretch}
.v7-via{grid-template-rows:subgrid;grid-row:span 5;row-gap:0}
.v7-via{display:grid}
.v7-via > .sf-pill{margin-bottom:12px}
.v7-via h3{margin-bottom:10px}
.v7-via .cta{align-self:end}
.v7-via-img{display:flex;flex-direction:column;justify-content:center}
.v7-via-img .api-preview .sf-ventana{padding-bottom:10px;margin-bottom:10px}
.v7-via-img .api-pedidos{margin:0}
.v7-via-img .api-pedidos li{padding-top:7px;padding-bottom:7px}
@supports not (grid-template-rows: subgrid){ .v7-via{display:flex} .v7-via-img{min-height:280px} }
@media (max-width:640px){ .v7-via{display:flex} }
/* v7aj (Walter 17-10 02:0x): la página Connectors tal como está publicada, con datos fijos, dentro del marco de la maqueta */
.v7-conectores .sf-portal-sub{margin:34px 0 10px}
.v7-conectores > section > section > h3{margin:26px 0 10px;font-size:18px}
.v7-conectores .sf-matriz-areas{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 8px;padding:0}
.v7-conectores .sf-matriz-areas a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;background:var(--sf-paper,#fff);border:1px solid var(--sf-line,#E6E1EC);color:var(--sf-ink,#241B2E);font-weight:600;font-size:13.5px;text-decoration:none}
.v7-conectores .sf-matriz-areas a:hover{border-color:var(--sf-brand,#723988)}
.v7-conectores > p.sf-ayuda:first-child{font-size:15px;color:var(--sf-ink,#241B2E);margin:0 0 14px}
/* v7ak (Walter 17-10 02:1x, «me gusta cómo tiene Claude la parte de connectors»): nuestro marco y colores; de Claude, la barra de búsqueda con pestañas de estado, las secciones con su cuenta y la tarjeta compacta (icono a la izquierda, nombre y detalle, estado a la derecha). Walter: «el gris de Catalogued resalta más que Available» → Available con la pastilla verde del sitio; Catalogued con pastilla de contorno gris, sin punto, y la tarjeta atenuada */
.v7-con-barra{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 26px}
.v7-con-busca{flex:1 1 320px;position:relative}
.v7-con-busca input{width:100%;box-sizing:border-box;min-height:44px;padding:0 14px 0 40px;border:1px solid var(--sf-line,#E6E1EC);border-radius:999px;background:var(--sf-paper,#fff);font:inherit;font-size:15px;color:var(--sf-ink,#241B2E)}
.v7-con-busca::before{content:"";position:absolute;left:15px;top:50%;width:14px;height:14px;transform:translateY(-50%);border:2px solid var(--sf-mut,#6b6474);border-radius:50%;box-sizing:border-box}
.v7-con-busca::after{content:"";position:absolute;left:26px;top:calc(50% + 5px);width:7px;height:2px;background:var(--sf-mut,#6b6474);transform:rotate(45deg)}
.v7-con-busca input:focus-visible{outline:2px solid var(--sf-brand,#723988);outline-offset:2px}
.v7-con-filtros{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--sf-soft,#F2F2F5)}
.v7-con-filtros button{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:13.5px;font-weight:600;color:var(--sf-mut,#6b6474);cursor:pointer}
.v7-con-filtros button b{font-weight:600;color:inherit;opacity:.8;margin-left:4px}
.v7-con-filtros button[aria-pressed=true]{background:var(--sf-paper,#fff);color:var(--sf-ink,#241B2E);box-shadow:0 1px 3px rgba(36,27,46,.12)}
.v7-con-barra #buscaConN{flex:1 0 100%;margin:0;min-height:0}
.v7-con-sec{margin:0 0 26px}
.v7-con-sec > h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:17px}
.v7-con-cuenta{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:999px;background:var(--sf-soft,#F2F2F5);color:var(--sf-mut,#6b6474);font-size:12.5px;font-weight:700}
.v7-con-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.v7-con{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--sf-paper,#fff);border:1px solid var(--sf-line,#E6E1EC);border-radius:16px;min-width:0}
.v7-con .v7-fam-ico{width:44px;height:44px;border-radius:12px;background:var(--sf-soft,#F2F2F5)}
.v7-con-txt{flex:1 1 auto;min-width:0}
.v7-con-txt h4{margin:0 0 3px;font-size:15px;line-height:1.3;font-weight:700}
.v7-con-txt p{margin:0;font-size:13.5px;color:var(--sf-mut,#6b6474)}
.v7-con-n{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--sf-soft,#F2F2F5);color:var(--sf-mut,#6b6474);font-size:12px;font-weight:600;vertical-align:1px}
.v7-con > .sf-pill{flex:none;margin-left:auto}
/* Walter 02:2x: las Catalogued no se apagan; la pastilla sola las distingue (sin punto amarillo) */
.v7-pill-cat{background:transparent;border:1px solid var(--sf-line,#E6E1EC);color:var(--sf-mut,#6b6474)}
.v7-con[hidden],.v7-con-sec[hidden]{display:none}
.v7-con-nota{margin:10px 0 0;max-width:80ch}
.v7-otras-vias .sf-card h4{margin:10px 0 6px;font-size:16px}
.v7-otras-vias .sf-card p{margin:0;color:var(--sf-mut,#6b6474);font-size:14.5px}
@media (max-width:760px){ .v7-con-grid{grid-template-columns:1fr} .v7-con{padding:12px 14px} }
@media (max-width:520px){ .v7-con{flex-wrap:wrap} .v7-con > .sf-pill{margin-left:58px} }
/* v7al (tachadura 32): el logo real del producto con nombre, en su tarjeta de Product; baldosa de 36 px con la marca monocroma */
.v7-logos{display:flex;gap:8px;margin:0 0 10px}
.v7-logo{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--sf-paper,#fff);border:1px solid var(--sf-line,#E6E1EC)}
.v7-logo svg{width:20px;height:20px;display:block}
/* v7am (tachadura 30): validador y Status dentro del marco de la maqueta; el formulario de validación es estático aquí (la lectura del PDF la hace el servidor) */
.v7-validar .drop{margin:0 0 22px}
.v7-validar .sf-acordeon{margin-top:22px}
.v7-status h2{margin:30px 0 12px;font-size:20px}
.v7-status .st-global{margin:0 0 8px}
/* v7an (tachadura 30): la API y su demo dentro del marco de la maqueta; el hero de la API sin su propio título (lo pone la cabecera común) */
.v7-api .portada{padding:0;background:transparent}
.v7-api .portada .envoltura{padding:0;max-width:none}
.v7-api .indice{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.v7-api .tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){ .v7-api .tres{grid-template-columns:1fr} }
.v7-api #familias .familia{margin:0 0 28px}
.v7-api .eventos{margin:0}
.v7-demo .panel{margin:0 0 24px}
/* v7ao (Walter 17-10 02:35): en la API, «.camino» es la ruta en monoespaciado, no la ilustración del camino de la portada (choque de nombre con home.css): vuelve a texto plano, y las familias van sobre blanco como en el vivo */
.v7-api .camino{background:transparent!important;padding:0!important;border-radius:0!important;box-shadow:none!important;border:0!important;display:inline!important;width:auto!important}
.v7-api details.ruta{border-bottom:1px solid var(--sf-line,#E6E1EC)}
.v7-api details.ruta:last-child{border-bottom:0}
/* v7ap: la nota de los códigos estables, discreta y después de la tabla */
.v7-api .v7-nota-eventos{margin:14px 0 0;max-width:80ch;font-size:13.5px;color:var(--sf-mut,#6b6474)}
.v7-api .v7-nota-eventos strong{font-weight:600;color:var(--sf-ink,#241B2E)}
/* v7aq: la tabla de eventos con nombre, código y significado */
.v7-api #eventos table td:first-child{white-space:nowrap}
.v7-api #eventos table td code{white-space:nowrap}
/* v7ar (tachadura 30): el portal de docs dentro del marco de la maqueta; el submenú de sección lista Resources y sus siete páginas */
.v7-doc .sf-portal-sub{margin:30px 0 12px}
.v7-doc figure.sf-audiencia-figura{margin:0 0 24px}
.v7-doc figure img{max-width:100%;height:auto}
.v7-doc .cl-dia{margin:0 0 26px}
/* v7as: Docs dentro de Learn: dos tarjetas con icono, como las familias de Product */
.v7-docs-learn .v7-fam-ico{margin-bottom:12px}
.v7-docs-learn h3{margin:0 0 8px}
/* v7at (Walter 17-10 03:4x, «¿dónde está Legal?»): privacidad y términos sólo en el pie y junto a donde se recogen datos (alta en el sandbox, contacto) */
.v7-legal-nota{margin:10px 0 0;font-size:13px}
.v7-legal-nota a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* v7av (Walter 17-10 03:5x): About con la gramática visual del sitio: tarjetas con icono, banda oscura «Who makes it» con dónde corre, tres hábitos, contacto en tarjeta */
.v7-about-tarjeta{display:flex;flex-direction:column}
.v7-about-tarjeta > p{margin:0 0 12px}
.v7-about-tarjeta > .v7-tarjeta-cta{margin-top:auto;padding-top:8px}
.v7-about-quien{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.v7-about-quien .txt h2{margin:6px 0 12px}
.v7-donde{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.v7-donde li{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.06)}
.v7-donde li div{display:flex;flex-direction:column;gap:2px}
.v7-donde li b{color:#fff}
.v7-donde li span{color:rgba(255,255,255,.78);font-size:14px}
.band.v7-oscura .v7-fam-ico{background:rgba(255,255,255,.12)}
.band.v7-oscura .v7-fam-ico svg{stroke:#fff}
.band.v7-oscura .v7-donde .v7-fam-ico{flex:none}
.v7-about-contacto{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.v7-about-contacto p{margin:0}
.v7-about-contacto .cta{margin:0}
@media (max-width:860px){ .v7-about-quien{grid-template-columns:1fr;gap:24px} }
/* v7aw (Walter 17-10 03:31): las tarjetas de About no llevan el filete ni el relieve al pasar o con foco (eso es de las tarjetas de plan) */
.v7-about-tarjeta:hover,.v7-about-tarjeta:focus-within{box-shadow:0 1px 2px rgba(36,27,46,.04);transform:none}
/* v7ax: el blog dentro del marco de la maqueta */
.v7-blog{max-width:none}
.v7-blog .bl-articulo{margin:0 auto}
/* v7ay (Walter 17-10 04:1x): Learn guía con tres puertas; Articles en formato blog minimalista con búsqueda; variantes A/B/C */
.v7-puertas{align-items:stretch}
.v7-puerta{display:flex;flex-direction:column;padding:22px 22px 24px;text-decoration:none;color:inherit}
.v7-puerta-img{display:block;border-radius:16px;background:var(--sf-soft,#F2F2F5);padding:10px 14px 0;margin:0 0 16px}
.v7-puerta-img svg{display:block;width:100%;height:auto}
.v7-puerta .kicker{margin:0 0 6px}
.v7-puerta h3{margin:0 0 8px;font-size:22px}
.v7-puerta p{margin:0 0 14px;color:var(--sf-mut,#6b6474)}
.v7-puerta .v7-rc-accion{margin-top:auto}
.band.soft .v7-puerta-img{background:var(--sf-paper,#fff)}
/* fila de artículo (común a A, B y C) */
.v7-art-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 22px}
.v7-art-barra .v7-con-busca{flex:1 1 320px}
.v7-art-barra [data-busca-n]{flex:1 0 100%;margin:0;min-height:0}
.v7-art-lista{display:grid;gap:8px}
.v7-art{display:grid;grid-template-columns:48px 1fr auto;align-items:start;gap:0 14px;padding:12px 14px;border:1px solid var(--sf-line,#E6E1EC);border-radius:14px;background:var(--sf-paper,#fff);text-decoration:none;color:inherit}
.v7-art:hover{border-color:var(--sf-brand,#723988)}
.v7-art-n{font-weight:700;color:var(--sf-brand,#723988);font-variant-numeric:tabular-nums;padding-top:2px}
.v7-art-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.v7-art-txt b{font-size:16px;line-height:1.3}
.v7-art-txt span{color:var(--sf-mut,#6b6474);font-size:14px;line-height:1.4}
.v7-art-min{color:var(--sf-mut,#6b6474);font-size:12.5px;white-space:nowrap;padding-top:4px}
.v7-art[hidden],.v7-art-grupo[hidden],.v7-serie-panel[hidden],.v7-serie-tarjeta[hidden],.v7-art-card[hidden]{display:none}
/* A */
.v7-series-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}
.v7-serie-tarjeta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:18px;border:1px solid var(--sf-line,#E6E1EC);border-radius:16px;background:var(--sf-paper,#fff);font:inherit;color:inherit;cursor:pointer;position:relative}
.v7-serie-tarjeta:hover{border-color:var(--sf-brand,#723988)}
.v7-serie-tarjeta-on{border-color:var(--sf-brand,#723988);box-shadow:inset 0 0 0 1px var(--sf-brand,#723988)}
.v7-serie-tarjeta .v7-fam-ico{background:var(--sf-soft,#F2F2F5)}
.v7-serie-num{position:absolute;top:16px;right:18px;font-weight:700;color:var(--sf-mut,#6b6474);font-size:13px}
.v7-serie-tarjeta b{font-size:16px;line-height:1.3}
.v7-serie-desc{color:var(--sf-mut,#6b6474);font-size:13.5px;line-height:1.4}
.v7-serie-n{margin-top:auto;font-size:12.5px;font-weight:600;color:var(--sf-brand,#723988)}
.v7-serie-panel{border-top:1px solid var(--sf-line,#E6E1EC);padding:18px 0 4px;margin-top:6px}
.v7-serie-panel-cab{margin:0 0 12px}
.v7-serie-panel-cab h3{margin:2px 0 4px;font-size:20px}
.v7-serie-panel-cab p{margin:0;color:var(--sf-mut,#6b6474)}
/* B */
.v7-art-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.v7-art-chips button,.v7-art-indice button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px 0 6px;border:1px solid var(--sf-line,#E6E1EC);border-radius:999px;background:var(--sf-paper,#fff);font:inherit;font-size:13.5px;font-weight:600;color:var(--sf-ink,#241B2E);cursor:pointer}
.v7-art-chips button[data-chip=""],.v7-art-indice button[data-chip=""]{padding-left:12px}
.v7-art-chips button .v7-fam-ico,.v7-art-indice button .v7-fam-ico{width:26px;height:26px;border-radius:8px;background:var(--sf-soft,#F2F2F5)}
.v7-art-chips button .v7-fam-ico svg,.v7-art-indice button .v7-fam-ico svg{width:15px;height:15px}
.v7-art-chips button b,.v7-art-indice button b{font-weight:600;color:var(--sf-mut,#6b6474)}
.v7-art-chips button[aria-pressed=true],.v7-art-indice button[aria-pressed=true]{background:var(--sf-ink,#241B2E);color:#fff;border-color:var(--sf-ink,#241B2E)}
.v7-art-chips button[aria-pressed=true] b,.v7-art-indice button[aria-pressed=true] b{color:rgba(255,255,255,.75)}
.v7-art-grupo{margin:0 0 24px}
.v7-art-grupo h3{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:17px}
.v7-art-grupo h3 .v7-serie-num{position:static;font-size:13px}
.v7-art-grupo-desc{margin:0 0 10px;color:var(--sf-mut,#6b6474);font-size:14px}
/* C */
.v7-art-c-cuerpo{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.v7-art-indice{position:sticky;top:calc(var(--v3-cab,61px) + 56px);display:grid;gap:6px}
.v7-art-indice button{justify-content:flex-start;border-radius:12px;min-height:40px}
.v7-art-indice button span{flex:1 1 auto;text-align:left}
.v7-art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.v7-art-card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--sf-line,#E6E1EC);border-radius:16px;background:var(--sf-paper,#fff);text-decoration:none;color:inherit}
.v7-art-card:hover{border-color:var(--sf-brand,#723988)}
.v7-art-card h4{margin:0;font-size:17px;line-height:1.3}
.v7-art-card p{margin:0;color:var(--sf-mut,#6b6474);font-size:14px;line-height:1.45}
.v7-art-card .v7-art-min{margin-top:auto;padding-top:6px}
@media (max-width:999px){ .v7-series-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .v7-art-c-cuerpo{grid-template-columns:1fr} .v7-art-indice{position:static;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:6px} .v7-art-indice button{flex:none;border-radius:999px} .v7-art-indice button span{text-align:center} }
@media (max-width:640px){ .v7-series-grid,.v7-art-grid{grid-template-columns:1fr} .v7-art{grid-template-columns:40px 1fr;gap:2px 12px} .v7-art-min{grid-column:2;padding-top:0} .v7-art-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px} .v7-art-chips button{flex:none} }
/* v7az (Walter 17-10 04:3x): en Learn, el título grande con palabras resaltadas (estilo publicado) y los libros como fichas horizontales */
.v7-cab-grande h1{font-size:clamp(40px,5.2vw,64px);line-height:1.05;font-weight:800;letter-spacing:-.025em;max-width:16ch}
.v7-cab-grande .sf-portal-lead{font-size:20px;max-width:62ch}
.v7-resalta{position:relative;z-index:0;white-space:nowrap}
.v7-resalta::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.3em;background:var(--sf-acc,#C6168D);opacity:.22;border-radius:6px;z-index:-1}
.v7-libros{display:grid;gap:20px}
.v7-libro{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:center;padding:22px}
.v7-libro-img{display:block;border-radius:14px;background:var(--sf-soft,#F2F2F5);padding:14px 16px 0;overflow:hidden}
.band.soft .v7-libro-img{background:var(--sf-soft,#F2F2F5)}
.v7-libro-img img{display:block;width:100%;height:auto;margin:0}
.v7-libro-txt .kicker{margin:0 0 6px}
.v7-libro-txt h3{margin:0 0 10px;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.v7-libro-txt h3 a{color:inherit;text-decoration:none}
.v7-libro-txt p{margin:0 0 16px;font-size:17px;color:var(--sf-mut,#6b6474)}
.v7-libro-txt .cta{margin:0}
@media (max-width:760px){ .v7-libro{grid-template-columns:1fr;gap:16px} .v7-libro-txt h3{font-size:24px} }
/* v7ba (Walter 17-10 04:5x): formatos de lectura con logo en cada ficha de libro: Read online · Apple Books · Google Play Books · Kindle · PDF */
.v7-formatos{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.v7-formato{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:6px 14px 6px 8px;border:1px solid var(--sf-line,#E6E1EC);border-radius:12px;background:var(--sf-paper,#fff);color:var(--sf-ink,#241B2E);text-decoration:none}
.v7-formato:hover{border-color:var(--sf-brand,#723988)}
.v7-formato-principal{background:var(--sf-brand,#723988);border-color:var(--sf-brand,#723988);color:#fff}
.v7-formato-principal:hover{background:var(--sf-brand-700,#4E2760)}
.v7-formato-ico{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--sf-soft,#F2F2F5);color:var(--sf-ink,#241B2E);flex:none}
.v7-formato-principal .v7-formato-ico{background:rgba(255,255,255,.18);color:#fff}
.v7-formato-ico svg{width:17px;height:17px;display:block}
.v7-formato span:last-child{display:flex;flex-direction:column;line-height:1.2}
.v7-formato b{font-size:14px;font-weight:700}
.v7-formato small{font-size:11.5px;color:var(--sf-mut,#6b6474)}
.v7-formato-principal small{color:rgba(255,255,255,.8)}
@media (max-width:640px){ .v7-formatos{gap:6px} .v7-formato{min-height:42px;padding:4px 10px 4px 6px} .v7-formato small{display:none} }
/* v7bc (Walter 17-10 04:12, «la lupa queda pegada arriba»): el rótulo sólo para lectores de pantalla no ocupaba lugar en el sitio vivo pero sí en la maqueta (faltaba .sr-only): con él, el rótulo mide 0 y la lupa queda centrada en el campo; vale para todos los buscadores */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.v7-con-busca{display:block}
/* v7bd (Walter 17-10 04:4x): los tres números de la keynote en Product: 4 formas de flujo · 3 → n idiomas · ≈ 10.000 pruebas */
.v7-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:8px 0 0}
.v7-cifra b{display:block;font-size:clamp(44px,5vw,64px);line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--sf-ink,#241B2E);font-variant-numeric:tabular-nums}
.v7-cifra p{margin:12px 0 0;padding-top:12px;border-top:3px solid var(--sf-acc,#C6168D);font-size:16px;font-weight:600;color:var(--sf-mut,#6b6474);line-height:1.3}
.v7-cifra-mas{font-size:.45em;color:var(--sf-acc,#C6168D);vertical-align:.5em;letter-spacing:0}
.v7-cifra-aprox{color:var(--sf-acc,#C6168D);font-weight:700}
.v7-cifras-nota{margin:14px 0 0}
@media (max-width:760px){ .v7-cifras{grid-template-columns:1fr;gap:18px} }
/* v7be (Walter 17-10 05:0x): A y B con conmutador; la tarjeta de serie lleva una ilustración vectorial (sin icono) con aire entre imagen y texto */
.v7-art-vistas{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--sf-paper,#fff);border:1px solid var(--sf-line,#E6E1EC)}
.v7-art-vistas button{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:13.5px;font-weight:600;color:var(--sf-mut,#6b6474);cursor:pointer}
.v7-art-vistas button[aria-pressed=true]{background:var(--sf-ink,#241B2E);color:#fff}
.v7-art-switch > .v7-art-barra{margin-bottom:22px}
.v7-art-switch [data-vista][hidden]{display:none}
.v7-serie-tarjeta{padding:0 0 18px;gap:0;overflow:hidden}
.v7-serie-img{display:block;width:100%;background:var(--sf-soft,#F2F2F5);padding:6px 10px 0;margin:0 0 18px;border-bottom:1px solid var(--sf-line,#E6E1EC)}
.v7-serie-img svg{display:block;width:100%;height:auto}
.v7-serie-txt{display:flex;flex-direction:column;gap:8px;padding:0 18px;position:relative;flex:1 1 auto;width:100%;box-sizing:border-box}
.v7-serie-txt .v7-serie-num{top:0;right:18px}
.v7-serie-txt .v7-serie-n{margin-top:6px}
.band.soft .v7-serie-img{background:var(--sf-soft,#F2F2F5)}
/* v7bf (Walter 17-10 05:1x): el recorrido del producto vive en Product#tour; el guion de la demo va plegado debajo de los cuatro pasos */
.v7-guion{margin:28px 0 0;border:1px solid var(--sf-line,#E6E1EC);border-radius:16px;background:var(--sf-paper,#fff)}
.v7-guion summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:18px 22px;position:relative}
.v7-guion summary::-webkit-details-marker{display:none}
.v7-guion summary::after{content:"";position:absolute;right:22px;top:26px;width:10px;height:10px;border-right:2px solid var(--sf-ink,#241B2E);border-bottom:2px solid var(--sf-ink,#241B2E);transform:rotate(45deg);transition:transform .15s}
.v7-guion[open] summary::after{transform:rotate(225deg);top:30px}
.v7-guion-t{font-size:18px;font-weight:800;letter-spacing:-.01em}
.v7-guion-s{font-size:15px;color:var(--sf-mut,#6b6474);padding-right:32px}
.v7-guion-lista{list-style:none;margin:0;padding:4px 22px 22px;display:grid;gap:14px}
.v7-guion-lista li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;padding-top:14px;border-top:1px solid var(--sf-line,#E6E1EC)}
.v7-guion-n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--sf-acc-50,#FCE9F5);color:var(--sf-acc-700,#9E1171);font-size:14px;font-weight:700}
.v7-guion-lista .kicker{display:block;margin:0 0 2px;font-size:11px}
.v7-guion-lista b{display:block;font-size:16px;font-weight:700;margin:0 0 4px}
.v7-guion-lista p{margin:0;font-size:15px;color:var(--sf-ink,#241B2E)}
@media (min-width:900px){ .v7-guion-lista{grid-template-columns:1fr 1fr;column-gap:28px} }
/* v7bg (Walter 17-10 05:4x): el tour va en Try; Product abre con las ocho familias de un vistazo */
.v7-fam-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.v7-fam-card{display:flex;flex-direction:column;gap:8px;padding:18px;text-decoration:none;color:var(--sf-ink,#241B2E)}
.v7-fam-card .v7-fam-ico{margin-bottom:6px}
.v7-fam-card b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.v7-fam-frase{font-size:14px;line-height:1.45;color:var(--sf-mut,#6b6474);flex:1 1 auto}
.v7-fam-n{font-size:12.5px;font-weight:600;color:var(--sf-brand,#723988)}
@media (max-width:999px){ .v7-fam-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .v7-fam-grid{grid-template-columns:1fr} }
/* v7bh (Walter 17-10 06:0x): la tarjeta de familia sin conteo; el icono en su baldosa suave aunque la banda sea soft */
.band.soft .v7-fam-card .v7-fam-ico{background:var(--sf-soft,#F2F2F5)}
.v7-fam-card .v7-fam-ico{margin-bottom:10px}
.v7-fam-card b{margin-bottom:2px}
/* v7bi (Walter 17-10 06:1x): Workspaces en Try, tres por fila */
#spaces .workspace-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:999px){ #spaces .workspace-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ #spaces .workspace-grid{grid-template-columns:1fr} }
/* v7bj (Walter 17-10 06:3x): Product abre con «Product journeys»; la cabecera «Everything a document needs…» segunda, con el buscador */
.v7-cab-journeys .v7-fam-grid{margin-top:34px}
.v7-cab-journeys .v7-fam-card .v7-fam-ico{background:var(--sf-soft,#F2F2F5)}
#catalogo .sechead{margin-bottom:22px}
#catalogo .sechead h2{max-width:22ch}
.v7-busca-cat .v7-leyenda{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--sf-mut,#6b6474)}

/* v7bk (Walter 17-10 06:5x): el icono de cada familia alineado con su título: la baldosa heredaba el margen inferior de .sf-ico (18 px) y subía 9 px */
.v7-fam .v7-fam-ico{margin:0}
/* v7bl (Walter 17-10 07:0x, «el color del pie»): el pie cierra en oscuro (tinta), no como una banda más; casi todas las páginas terminan en banda soft y el pie gris se confundía con ella */
.sf-portal-pie{background:var(--sf-ink,#241B2E);border-top:0;color:rgba(255,255,255,.72);padding-block:48px 28px}
.sf-portal-pie .sf-pie-marca{color:#fff}
.sf-portal-pie .sf-pie-lema{color:rgba(255,255,255,.72)}
.sf-portal-pie .sf-pie-col h2{color:#fff;opacity:.92}
.sf-portal-pie .sf-pie-col a,.sf-portal-pie a{color:rgba(255,255,255,.78)}
.sf-portal-pie .sf-pie-col a:hover,.sf-portal-pie a:hover{color:#fff}
.sf-portal-pie .sf-pie-legal{border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6)}
.sf-portal-pie .sf-pie-legal a{color:rgba(255,255,255,.72)}
.sf-portal-pie .sf-pie-marca:focus-visible,.sf-portal-pie .sf-pie-col a:focus-visible,.sf-portal-pie .sf-pie-legal a:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* v7bm (Walter 17-10 07:1x, «más sobrio, algún grafito cálido»): el pie en grafito cálido #2C2A29 (el mismo primario del preset «Interfase» que guarda el sandbox), textos más apagados */
.sf-portal-pie{background:#2C2A29;color:rgba(255,255,255,.66)}
.sf-portal-pie .sf-pie-marca{color:rgba(255,255,255,.95)}
.sf-portal-pie .sf-pie-lema{color:rgba(255,255,255,.62)}
.sf-portal-pie .sf-pie-col h2{color:rgba(255,255,255,.9);opacity:1}
.sf-portal-pie .sf-pie-col a,.sf-portal-pie a{color:rgba(255,255,255,.7)}
.sf-portal-pie .sf-pie-col a:hover,.sf-portal-pie a:hover{color:#fff}
.sf-portal-pie .sf-pie-legal{border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.52)}
.sf-portal-pie .sf-pie-legal a{color:rgba(255,255,255,.66)}
/* v7bo (Walter 17-10 07:4x): en Try, la nota legal va con las puertas; el paso 4 enlaza la muestra */
.v7-nota-puertas{margin:18px 0 0}
#como .paso p a{color:var(--sf-brand,#723988)}

/* v7bp (Walter 17-10 07:5x, «tiene sombreado atrás que no me gusta; yo lo sacaría»): fuera la trama de puntos de todas las cabeceras hero; la cabecera corta (Try) queda lisa, sin lavados de color */
.hero::after{display:none}
.v2-hero-corto{background:var(--sf-paper,#fff)}
/* v7bq (Walter 17-10 08:0x): Try con una sola voz: What you get (cuatro hechos) y Journeys to try (seis recorridos para leer) */
.v7-hechos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.v7-hechos li{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--sf-line,#E6E1EC);border-radius:14px;background:var(--sf-paper,#fff)}
.v7-hechos b{font-size:16px;font-weight:700}
.v7-hechos span{font-size:15px;line-height:1.5;color:var(--sf-mut,#6b6474)}
.v7-viajes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.v7-viaje{display:flex;flex-direction:column;gap:6px;padding:22px 24px}
.v7-viaje .kicker{margin:0 0 2px}
.v7-viaje h3{margin:0;font-size:21px;line-height:1.2;font-weight:800;letter-spacing:-.01em}
.v7-viaje-intro{margin:0 0 8px;font-size:15.5px;color:var(--sf-mut,#6b6474)}
.v7-viaje-pasos{list-style:none;margin:0;padding:0;counter-reset:paso;display:grid;gap:10px}
.v7-viaje-pasos li{counter-increment:paso;position:relative;padding-left:40px;font-size:15px;line-height:1.5;color:var(--sf-ink,#241B2E)}
.v7-viaje-pasos li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:0;top:1px;width:28px;height:22px;border-radius:7px;background:var(--sf-acc-50,#FCE9F5);color:var(--sf-acc-700,#9E1171);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.v7-viaje-primero{border-color:var(--sf-brand,#723988);box-shadow:0 0 0 1px var(--sf-brand,#723988) inset}
.v7-viajes-pie{margin:22px 0 0;font-size:14.5px;color:var(--sf-mut,#6b6474)}
@media (max-width:760px){ .v7-hechos,.v7-viajes{grid-template-columns:1fr} .v7-viaje{padding:18px} }
/* v7bs (Walter 17-10 08:5x): las preguntas de Try */
.v7-faq{display:grid;gap:10px;max-width:860px}
.v7-faq-item{border:1px solid var(--sf-line,#E6E1EC);border-radius:14px;background:var(--sf-paper,#fff);padding:0 20px}
.v7-faq-item summary{list-style:none;cursor:pointer;padding:16px 32px 16px 0;font-size:17px;font-weight:700;position:relative;min-height:44px;box-sizing:border-box}
.v7-faq-item summary::-webkit-details-marker{display:none}
.v7-faq-item summary::after{content:"";position:absolute;right:4px;top:22px;width:9px;height:9px;border-right:2px solid var(--sf-ink,#241B2E);border-bottom:2px solid var(--sf-ink,#241B2E);transform:rotate(45deg);transition:transform .15s}
.v7-faq-item[open] summary::after{transform:rotate(225deg);top:26px}
.v7-faq-item p{margin:0;padding:0 0 18px;font-size:15.5px;line-height:1.55;color:var(--sf-ink,#241B2E);max-width:70ch}
.v7-faq-item summary:focus-visible{outline:2px solid var(--sf-brand,#723988);outline-offset:2px;border-radius:8px}
/* v7bu (Walter 17-10 09:1x): la FAQ de Try por tópicos, con índice */
.v7-faq-indice{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.v7-faq-indice a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--sf-line,#E6E1EC);border-radius:999px;background:var(--sf-paper,#fff);color:var(--sf-ink,#241B2E);font-size:14px;font-weight:600;text-decoration:none}
.v7-faq-indice a:hover{border-color:var(--sf-brand,#723988);color:var(--sf-brand,#723988)}
.v7-faq-grupos{display:grid;gap:34px;max-width:860px}
.v7-faq-grupo h3{margin:0 0 12px;font-size:19px;font-weight:800;letter-spacing:-.01em;scroll-margin-top:calc(var(--sf-alto-cabecera,62px) + 16px)}
.v7-faq-grupo{scroll-margin-top:calc(var(--sf-alto-cabecera,62px) + 16px)}
/* v7bw (Walter 17-10 09:3x): los recorridos como acordeones, una columna compacta */
.v7-viajes{display:grid;grid-template-columns:1fr;gap:10px;max-width:860px}
.v7-viaje{display:block;padding:0 20px;border:1px solid var(--sf-line,#E6E1EC);border-radius:14px;background:var(--sf-paper,#fff)}
.v7-viaje summary{list-style:none;cursor:pointer;padding:14px 32px 14px 0;position:relative;min-height:44px}
.v7-viaje summary::-webkit-details-marker{display:none}
.v7-viaje summary::after{content:"";position:absolute;right:4px;top:26px;width:9px;height:9px;border-right:2px solid var(--sf-ink,#241B2E);border-bottom:2px solid var(--sf-ink,#241B2E);transform:rotate(45deg);transition:transform .15s}
.v7-viaje[open] summary::after{transform:rotate(225deg);top:30px}
.v7-viaje-cab{display:flex;flex-direction:column;gap:2px}
.v7-viaje-cab .kicker{margin:0}
.v7-viaje-cab b{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.v7-viaje-cuerpo{padding:0 0 18px}
.v7-viaje-intro{margin:0 0 10px;font-size:15.5px;color:var(--sf-mut,#6b6474);max-width:70ch}
.v7-viaje-primero{border-color:var(--sf-brand,#723988);box-shadow:none}
.v7-viaje summary:focus-visible{outline:2px solid var(--sf-brand,#723988);outline-offset:2px;border-radius:8px}
@media (max-width:760px){ .v7-viaje{padding:0 16px} }
/* v7by (Walter 17-10 10:0x): la FAQ como lista de tópicos plegados; sin chips */
.v7-faq-indice{display:none}
.v7-faq-grupos{display:grid;gap:0;max-width:860px;border-top:1px solid var(--sf-line,#E6E1EC)}
.v7-faq-grupo{border-bottom:1px solid var(--sf-line,#E6E1EC)}
.v7-faq-grupo > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 36px 18px 0;position:relative;min-height:44px}
.v7-faq-grupo > summary::-webkit-details-marker{display:none}
.v7-faq-grupo > summary h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.v7-faq-grupo > summary .v7-faq-n{font-size:13px;color:var(--sf-mut,#6b6474);white-space:nowrap}
.v7-faq-grupo > summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2px solid var(--sf-ink,#241B2E);border-bottom:2px solid var(--sf-ink,#241B2E);transform:rotate(-45deg);transition:transform .15s}
.v7-faq-grupo[open] > summary::after{transform:rotate(45deg);margin-top:-9px}
.v7-faq-grupo > summary:hover h3{color:var(--sf-brand,#723988)}
.v7-faq-grupo > summary:focus-visible{outline:2px solid var(--sf-brand,#723988);outline-offset:2px;border-radius:8px}
.v7-faq-grupo .v7-faq{padding:0 0 18px}

/* v7bz (Walter 17-10 10:2x, «sin el número de preguntas; las preguntas más chicas que el título, o éste más grande»): jerarquía de dos niveles: el tópico grande y pesado; la pregunta chica, sin tarjeta, con filete fino e indentada */
.v7-faq-grupo > summary{padding:20px 36px 20px 0}
.v7-faq-grupo > summary h3{font-size:23px;font-weight:800;letter-spacing:-.015em}
.v7-faq-grupo .v7-faq{gap:0;padding:0 0 14px 18px}
.v7-faq-item{border:0;border-radius:0;background:transparent;padding:0;border-top:1px solid var(--sf-line,#E6E1EC)}
.v7-faq-item:first-child{border-top:0}
.v7-faq-item summary{font-size:15.5px;font-weight:600;padding:12px 32px 12px 0;color:var(--sf-ink,#241B2E)}
.v7-faq-item summary::after{width:8px;height:8px;top:18px}
.v7-faq-item[open] summary::after{top:22px}
.v7-faq-item p{font-size:15px;padding:0 0 14px}
/* v7ca (Walter 17-10 10:3x, «about X min más delicado y en otra parte; confunde al título»): la duración sale del rótulo y va a la derecha, chica y apagada, antes de la flecha */
.v7-viaje summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-right:36px}
.v7-viaje-min{font-size:12.5px;color:var(--sf-mut,#6b6474);white-space:nowrap;letter-spacing:.01em}
@media (max-width:640px){ .v7-viaje-min{display:none} }
/* v7cb (Walter 17-10 10:4x, «¿falta el logo aquí?»): el isotipo de public/marca/sf.svg junto al nombre, en cabecera y pie */
.sf-portal-marca,.sf-pie-marca{display:inline-flex;align-items:center;gap:10px}
.v7-marca-ico{display:block;width:28px;height:28px;border-radius:7px;flex:none}
.sf-pie-marca .v7-marca-ico{width:24px;height:24px;border-radius:6px}
/* v7cc (Walter 17-10 10:5x, «¿antes no tenía el de Signing Flows y un punto?»): la marca tipográfica propia del 23-09 (public/marca/signing-flows.svg, «Signing Flows» con el punto magenta) en la cabecera; la versión blanca en el pie grafito. Cuando la instalación tiene logo propio, lo reemplaza (como hace api.js) */
.v7-marca-ico{display:none}
.v7-marca-logo{display:block;height:26px;width:auto}
.sf-pie-marca .v7-marca-logo{height:22px}
@media (max-width:640px){ .v7-marca-logo{height:22px} }
/* v7cd (Walter 17-10 11:0x, «también había un logo como si fuese una firma, un favicon; recuperalo»): public/favicon.svg (la rúbrica: trazo morado y visto magenta) como favicon de todas las páginas y como isotipo delante de la marca tipográfica */
.sf-portal-marca{gap:8px}
.v7-marca-firma{display:block;width:30px;height:30px;flex:none}
@media (max-width:640px){ .v7-marca-firma{width:26px;height:26px} }
/* v7cf (menú del teléfono, decisión de Fable 17-10 11:3x): la fila de la cabecera en UNA línea a 375 (marca + Try + Menu), como la construida en NAV-2b; la marca más chica en el teléfono */
@media (max-width:640px){
  .sf-portal-cab .sf-portal-in{flex-wrap:nowrap;gap:8px}
  .v7-marca-firma{width:24px;height:24px}
  .v7-marca-logo{height:19px}
  .sf-portal-marca{gap:6px;flex:none}
  .sf-portal-acciones{flex:none;gap:6px}
  .sf-portal-cab .sf-btn.sf-chico{padding:0 10px;min-height:36px;font-size:13px}
  .v2-menu{min-height:36px;padding:0 10px}
}
/* v7cg (17-10 11:4x): la FAQ corta de la API demo, una lista sola sin tópicos */
.v7-faq-sola{max-width:860px;border-top:1px solid var(--sf-line,#E6E1EC);padding:0}
.v7-faq-sola .v7-faq-item{border-top:0;border-bottom:1px solid var(--sf-line,#E6E1EC)}
#faq-demo .v2-bajar{margin-top:22px}

/* v7ch (Walter 17-10 11:5x, «no necesitan puntos»): las pastillas de estado de la API demo sin el punto de color */
.v7-demo .sf-pill .punto{display:none}
/* v7ci (Walter 17-10 12:1x, «no hay buen contraste con el fondo de la sección»): en la banda gris, la escena de cada serie va sobre un violeta muy pálido (el 50 de la marca) y la tarjeta en blanco, así se despega del fondo y del texto */
.v7-serie-img,.band.soft .v7-serie-img{background:var(--sf-brand-50,#F3EDF7);border-bottom-color:var(--sf-line,#E6E1EC)}
.band.soft .v7-serie-tarjeta{background:var(--sf-paper,#fff)}
/* v7cj (Walter 17-10 12:2x, «sigue mal»): el violeta pálido no alcanza (casi la misma luminancia que la banda). La escena va en blanco, igual que la tarjeta, con el filete fino abajo: la tarjeta entera blanca sobre la banda gris es lo que se ve */
.v7-serie-img,.band.soft .v7-serie-img{background:var(--sf-paper,#fff)}
.band.soft .v7-serie-tarjeta{border-color:var(--sf-line,#E6E1EC);box-shadow:0 1px 2px rgba(36,27,46,.06)}
/* v7ck (Walter 17-10 13:5x): tercera vista «As cards»: tarjetas tipo blog con la escena de su serie en otro tono (trazo apagado sobre rosado pálido), para que no se confundan con las tarjetas de serie */
.v7-art-card{display:flex;flex-direction:column;gap:6px;padding:0 0 16px;overflow:hidden;background:var(--sf-paper,#fff);border:1px solid var(--sf-line,#E6E1EC);border-radius:14px;text-decoration:none;color:var(--sf-ink,#241B2E)}
.v7-art-card-img{display:block;height:112px;background:var(--sf-acc-50,#FCE9F5);border-bottom:1px solid var(--sf-line,#E6E1EC);overflow:hidden;margin:0 0 10px}
.v7-art-card-img svg{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.45) saturate(.75) opacity(.7);transform:scale(1.12)}
.v7-art-card .kicker,.v7-art-card h4,.v7-art-card p,.v7-art-card .v7-art-min{margin-left:18px;margin-right:18px}
.v7-art-card h4{margin-top:0;margin-bottom:2px;font-size:16.5px;line-height:1.25}
.v7-art-card p{margin-top:0;margin-bottom:6px;font-size:14px;color:var(--sf-mut,#6b6474)}
.v7-art-card:hover{border-color:var(--sf-brand,#723988)}
.v7-art-card:hover .v7-art-card-img svg{filter:none}

/* v7ck-b: la escena de la tarjeta se ve recortada y grande, no encogida en la franja */
.v7-art-card-img{display:flex;align-items:center;justify-content:center}
.v7-art-card-img svg{width:auto;height:172px;flex:none;transform:none;margin-top:-6px}
/* v7ck-c: la escena a color casi pleno; el tono distinto lo da el fondo rosado y el tamaño, no un lavado */
.v7-art-card-img svg{filter:saturate(.9) opacity(.92)}
/* v7cl (Walter 17-10 14:2x): «As cards» en el MISMO estilo que las tarjetas de serie: escena entera sobre blanco con el filete, sin lavado ni franja rosada */
.v7-art-card-img{display:block;height:auto;background:var(--sf-paper,#fff);padding:6px 10px 0;margin:0 0 12px}
.v7-art-card-img svg{display:block;width:100%;height:auto;filter:none;transform:none;margin:0}
.v7-art-card:hover .v7-art-card-img svg{filter:none}

/* v7cm (Walter 17-10 15:3x, «no me gustan, queda todo muy confuso»): las tarjetas de «As cards» sin imagen; rótulo «Series 01 · Article 1» */
.v7-art-card{padding:18px 0 16px}
/* v7cn (Walter 17-10 15:5x): «As cards» más limpia: sin minutos en las tarjetas; el índice de la izquierda como lista con el icono a la izquierda, sin conteo por serie (sólo «All articles 48») */
.v7-art-indice{gap:2px}
.v7-art-indice button{display:flex;width:100%;justify-content:flex-start;text-align:left;gap:10px;min-height:40px;padding:0 10px 0 6px;border:0;border-radius:10px;background:transparent}
.v7-art-indice button[data-chip=""]{padding-left:10px;margin-bottom:6px;border:1px solid var(--sf-line,#E6E1EC);background:var(--sf-paper,#fff)}
.v7-art-indice button[data-chip=""] b{margin-left:auto}
.v7-art-indice button .v7-fam-ico{flex:none}
.v7-art-indice button:hover{background:var(--sf-soft,#F2F2F5)}
.v7-art-indice button[aria-pressed=true]{background:var(--sf-ink,#241B2E);color:#fff}
.v7-art-card p{margin-bottom:0}
/* v7co (Walter 17-10 16:0x): «As a list» como acordeones cerrados y exclusivos; número grande; serie más grande que sus artículos; filas sin «1.1» */
.v7-art-acordeones{display:grid;gap:0;border-top:1px solid var(--sf-line,#E6E1EC)}
.v7-art-grupo{border-bottom:1px solid var(--sf-line,#E6E1EC);margin:0;padding:0}
.v7-art-grupo > summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px;padding:20px 40px 20px 0;position:relative;min-height:44px}
.v7-art-grupo > summary::-webkit-details-marker{display:none}
.v7-art-grupo > summary::after{content:"";position:absolute;right:10px;top:30px;width:10px;height:10px;border-right:2px solid var(--sf-ink,#241B2E);border-bottom:2px solid var(--sf-ink,#241B2E);transform:rotate(45deg);transition:transform .15s}
.v7-art-grupo[open] > summary::after{transform:rotate(225deg);top:34px}
.v7-art-grupo-num{flex:none;font-size:30px;font-weight:800;line-height:1;color:var(--sf-acc,#C6168D);letter-spacing:-.02em;min-width:44px;padding-top:2px}
.v7-art-grupo-txt{display:flex;flex-direction:column;gap:4px}
.v7-art-grupo-nombre{font-size:22px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.v7-art-grupo-nombre .v7-con-cuenta{font-size:14px;font-weight:600;color:var(--sf-mut,#6b6474);margin-left:8px;vertical-align:middle}
.v7-art-grupo-desc{font-size:15px;color:var(--sf-mut,#6b6474)}
.v7-art-grupo > .v7-art-lista{padding:0 0 18px 62px}
.v7-art-grupo .v7-art{padding-left:16px}
.v7-art-grupo > summary:hover .v7-art-grupo-nombre{color:var(--sf-brand,#723988)}
.v7-art-grupo > summary:focus-visible{outline:2px solid var(--sf-brand,#723988);outline-offset:2px;border-radius:8px}
@media (max-width:640px){ .v7-art-grupo-num{font-size:24px;min-width:36px} .v7-art-grupo-nombre{font-size:19px} .v7-art-grupo > .v7-art-lista{padding-left:0} }

/* v7co-b: sin la columna del número, la fila de artículo tiene dos columnas: texto y minutos */
.v7-art-grupo .v7-art{grid-template-columns:minmax(0,1fr) auto}
.v7-art-grupo .v7-art .v7-art-txt{min-width:0}
/* v7cp (Walter 17-10 16:5x, comentario en los libros): formatos sin subtítulo, salvo «Read online · In the browser»; botones más bajos */
.v7-formato{min-height:40px;padding:5px 14px 5px 7px}
.v7-formato span:last-child{justify-content:center}
/* v7cq (Walter 17-10 16:5x, comentario en los formatos): letra más chica en los botones de formato */
.v7-formato b{font-size:12.5px}
.v7-formato small{font-size:10.5px}
.v7-formato{min-height:36px;padding:4px 12px 4px 6px;gap:8px}
.v7-formato-ico{width:26px;height:26px;border-radius:7px}
.v7-formato-ico svg{width:14px;height:14px}
/* v7cr (Walter 17-10 17:1x, comentario en la cabecera): fuera la rúbrica delante del logotipo; queda sólo «Signing Flows.» (la rúbrica sigue como favicon) */
.v7-marca-firma{display:none}
/* v7cs (Walter 17-10 17:2x, comentario «no me convence este color, buscá uno que use Apple»): el pie en el gris casi negro de Apple (#1d1d1f, el de sus secciones oscuras y textos) en vez del grafito cálido */
.sf-portal-pie{background:#1d1d1f}
/* v7ct (Walter 17-10 17:3x, comentario en «How people sign»): la banda oscura de la portada en grafito cálido (#2C2A29), distinta del pie (#1d1d1f, frío): dos oscuros, una cálida en el relato y una fría al cerrar */
.band.v7-oscura{background:#2C2A29}

/* v7cu (Walter 17-10 19:2x, «adelante, aprobado»): el hero de la portada es una fotografía: texto a la izquierda, a la derecha cuatro personas en cuatro lugares (5:4, esquina inferior izquierda grande) con la tarjeta de evidencia apoyada sobre el borde; vidrio en la 1 y la 3, grafito en la 2 y la 4; rotan cada 6 s. El subrayado del titular se pinta por fragmento porque el em ocupa dos líneas. */
.vh{position:relative;overflow:visible}
.vh .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.vh-txt h1{font-size:clamp(40px,5.4vw,66px);line-height:1.04;letter-spacing:-.03em;margin:10px 0 18px;max-width:15ch}
.vh-txt h1 span,.vh-txt h1 em{white-space:normal;display:inline}
.vh-txt .lead{font-size:19px;max-width:48ch}
.vh-foto{background:var(--sf-paper,#fff);padding:72px 0 72px}
.vh-foto h1 em{font-style:normal;position:static;background:linear-gradient(transparent calc(100% - .40em),rgba(198,22,141,.22) calc(100% - .40em),rgba(198,22,141,.22) calc(100% - .06em),transparent calc(100% - .06em))}
.vh-foto h1 em::after{display:none}
.vh-figura{position:relative;margin:0 0 0 28px}
.vh-fotos{position:relative;aspect-ratio:5/4;border-radius:28px 28px 28px 120px;overflow:hidden;background:#2C2A29}
.vh-diapo{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.vh-diapo-on{opacity:1}
.vh-diapo img{width:100%;height:100%;object-fit:cover;display:block}
.vh-tarjeta{position:absolute;left:-28px;bottom:36px;z-index:2;border-radius:16px;padding:12px 16px 13px;display:flex;flex-direction:column;gap:3px;min-width:250px;max-width:320px;opacity:0;transition:opacity .6s ease;pointer-events:none}
.vh-tarjeta-on{opacity:1}
.vh-marca{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#5F5A66;margin-bottom:2px}
.vh-tile{width:14px;height:14px;border-radius:4px;background:var(--sf-brand,#723988);display:inline-block}
.vh-tarjeta-k{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--sf-brand,#723988)}
.vh-tarjeta b{font-size:15.5px;line-height:1.3;color:var(--sf-ink,#1d1d1f)}
.vh-tarjeta>span:last-child{font-size:13px;color:#5F5A66}
.vh-tarjeta-vidrio{background:rgba(255,255,255,.74);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,.65);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.vh-tarjeta-grafito{background:rgba(44,42,41,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.vh-tarjeta-grafito .vh-marca{color:rgba(255,255,255,.75)}
.vh-tarjeta-grafito .vh-tarjeta-k{color:#F6C9E4}
.vh-tarjeta-grafito b{color:#fff}
.vh-tarjeta-grafito>span:last-child{color:rgba(255,255,255,.78)}
.vh-puntos{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;justify-content:center;gap:6px}
.vh-puntos button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.55);cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.vh-puntos button[aria-pressed=true]{background:#fff;width:20px;border-radius:999px}
/* BLANCOS-TACTILES-1: el punto se ve de 7 px y se toca en 35 de alto (el área de más es transparente: no mueve el punto ni agranda la fila) */
.vh-puntos button{position:relative}
.vh-puntos button::before{content:"";position:absolute;inset:-14px -8px}
@media (max-width:900px){ .vh .wrap{grid-template-columns:1fr} .vh-figura{margin-left:12px} .vh-fotos{border-radius:22px 22px 22px 80px} .vh-tarjeta{left:-12px;bottom:14px;max-width:calc(100% - 24px)} }
@media (prefers-reduced-motion:reduce){ .vh-diapo,.vh-tarjeta{transition:none} }

/* v7cv (Walter 17-10 19:23, comentario en la ilustración de «Go to Learn»): la puerta de libros de Learn en la portada, más chica y sin fichas */
.v7-aprender-img{max-width:400px}
@media (min-width:900px){ .v7-aprender-img{max-width:420px;justify-self:center} }

/* v7cw (Walter 17-10 21:0x, «#F5F5F7 probemos en maqueta»): el gris de las bandas (--sf-soft) pasa de #F2F2F5 a #F5F5F7 en design-system.css; es UNA variable, los fallbacks #F2F2F5 de este archivo no actúan mientras exista. En el vivo: la misma línea (public/design-system.css:73), en PIE-2. */

/* v7cx (Walter 17-10 22:45, comentario en el h1 del hero: «muy cargada; subrayado más clarito y esquinas redondeadas, o sólo en proof»): las dos cosas: sólo «proof», banda al 16 % con esquinas redondeadas */
.vh-foto h1 em{background:linear-gradient(transparent calc(100% - .42em),rgba(198,22,141,.16) calc(100% - .42em),rgba(198,22,141,.16) calc(100% - .05em),transparent calc(100% - .05em));border-radius:.2em;padding:0 .08em;margin:0 -.08em}

/* v5 */
.v5-series{display:grid;gap:12px;max-width:76ch}
.v3-cap h4 a{text-decoration:none;color:inherit}
.v3-cap h4 a:hover{text-decoration:underline}
.sf-portal-seccion a[hidden]{display:none}