/* Minification failed. Returning unminified contents.
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,27): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(38,45): run-time error CSS1039: Token not allowed after unary operator: '-fondo-gris'
(49,17): run-time error CSS1039: Token not allowed after unary operator: '-texto'
(50,22): run-time error CSS1039: Token not allowed after unary operator: '-fondo'
(51,23): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(54,32): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(54,53): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(63,17): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(67,41): run-time error CSS1019: Unexpected token, found ' '
(67,41): run-time error CSS1019: Unexpected token, found ' '
(67,41): run-time error CSS1042: Expected function, found ' '
(67,41): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(76,17): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(81,23): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(84,29): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(91,21): run-time error CSS1039: Token not allowed after unary operator: '-ancho'
(122,25): run-time error CSS1039: Token not allowed after unary operator: '-pildora'
(123,22): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(151,33): run-time error CSS1039: Token not allowed after unary operator: '-linea'
(154,17): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(170,17): run-time error CSS1039: Token not allowed after unary operator: '-texto'
(174,52): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(183,22): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(196,17): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(200,66): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(200,111): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(211,22): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(214,37): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(220,72): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(233,30): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(234,25): run-time error CSS1039: Token not allowed after unary operator: '-pildora'
(235,22): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(243,87): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(243,115): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(247,22): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(248,24): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(250,22): run-time error CSS1039: Token not allowed after unary operator: '-sombra'
(254,42): run-time error CSS1039: Token not allowed after unary operator: '-pildora'
(256,54): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(257,40): run-time error CSS1039: Token not allowed after unary operator: '-menta-suave'
(257,67): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(259,60): run-time error CSS1039: Token not allowed after unary operator: '-magenta'
(259,83): run-time error CSS1039: Token not allowed after unary operator: '-magenta-prof'
(260,39): run-time error CSS1039: Token not allowed after unary operator: '-magenta-suave'
(260,75): run-time error CSS1039: Token not allowed after unary operator: '-magenta-prof'
(260,103): run-time error CSS1039: Token not allowed after unary operator: '-magenta-prof'
(278,17): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(281,25): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(282,31): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(302,60): run-time error CSS1039: Token not allowed after unary operator: '-texto'
(309,67): run-time error CSS1039: Token not allowed after unary operator: '-linea'
(310,30): run-time error CSS1039: Token not allowed after unary operator: '-menta-suave'
(326,22): run-time error CSS1039: Token not allowed after unary operator: '-menta-suave'
(329,17): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(334,44): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(335,56): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(339,66): run-time error CSS1039: Token not allowed after unary operator: '-radio-s'
(341,60): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(344,56): run-time error CSS1039: Token not allowed after unary operator: '-linea'
(345,101): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(357,46): run-time error CSS1019: Unexpected token, found ' '
(357,46): run-time error CSS1019: Unexpected token, found ' '
(357,46): run-time error CSS1042: Expected function, found ' '
(357,46): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(363,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-l'
(364,22): run-time error CSS1039: Token not allowed after unary operator: '-sombra'
(367,80): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(372,22): run-time error CSS1039: Token not allowed after unary operator: '-fondo-gris'
(373,36): run-time error CSS1039: Token not allowed after unary operator: '-fondo-gris'
(377,36): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(399,17): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(401,37): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(401,64): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(404,32): run-time error CSS1039: Token not allowed after unary operator: '-sombra'
(413,22): run-time error CSS1039: Token not allowed after unary operator: '-verde'
(427,22): run-time error CSS1039: Token not allowed after unary operator: '-fondo-gris'
(428,17): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(431,80): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(435,68): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(436,86): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(456,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(457,22): run-time error CSS1039: Token not allowed after unary operator: '-fondo'
(458,17): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(459,22): run-time error CSS1039: Token not allowed after unary operator: '-sombra'
(464,50): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(470,28): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(471,28): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(492,17): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(502,30): run-time error CSS1039: Token not allowed after unary operator: '-linea-fuerte'
(503,25): run-time error CSS1039: Token not allowed after unary operator: '-pildora'
(505,17): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(511,38): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(523,35): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(527,24): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(528,32): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(531,37): run-time error CSS1039: Token not allowed after unary operator: '-fondo-gris'
(531,63): run-time error CSS1039: Token not allowed after unary operator: '-texto'
(561,30): run-time error CSS1039: Token not allowed after unary operator: '-linea-fuerte'
(562,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(563,22): run-time error CSS1039: Token not allowed after unary operator: '-fondo'
(564,22): run-time error CSS1039: Token not allowed after unary operator: '-sombra'
(583,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-s'
(584,17): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(588,83): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(588,104): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(589,65): run-time error CSS1039: Token not allowed after unary operator: '-menta-suave'
(589,92): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(590,75): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(591,60): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(591,107): run-time error CSS1039: Token not allowed after unary operator: '-fondo-gris'
(592,48): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(592,95): run-time error CSS1039: Token not allowed after unary operator: '-fondo-gris'
(594,86): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(602,30): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(603,25): run-time error CSS1039: Token not allowed after unary operator: '-pildora'
(605,17): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(613,24): run-time error CSS1039: Token not allowed after unary operator: '-magenta'
(614,28): run-time error CSS1039: Token not allowed after unary operator: '-magenta-suave'
(622,17): run-time error CSS1039: Token not allowed after unary operator: '-magenta-prof'
(627,25): run-time error CSS1039: Token not allowed after unary operator: '-magenta-prof'
(642,24): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(655,22): run-time error CSS1039: Token not allowed after unary operator: '-menta-suave'
(656,17): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(665,47): run-time error CSS1039: Token not allowed after unary operator: '-magenta-suave'
(671,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(672,22): run-time error CSS1039: Token not allowed after unary operator: '-menta-suave'
(676,43): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(676,70): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(688,34): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(716,17): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(725,30): run-time error CSS1039: Token not allowed after unary operator: '-linea-fuerte'
(726,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-s'
(728,17): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(734,44): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(734,106): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(737,42): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(738,60): run-time error CSS1039: Token not allowed after unary operator: '-verde'
(738,86): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(742,24): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(743,32): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(764,47): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(796,28): run-time error CSS1039: Token not allowed after unary operator: '-linea'
(804,61): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(810,25): run-time error CSS1039: Token not allowed after unary operator: '-pildora'
(811,22): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(818,22): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(819,28): run-time error CSS1039: Token not allowed after unary operator: '-avance'
(821,36): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(826,76): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(837,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-l'
(838,22): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(841,85): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(845,34): run-time error CSS1019: Unexpected token, found ' '
(845,34): run-time error CSS1019: Unexpected token, found ' '
(845,34): run-time error CSS1042: Expected function, found ' '
(845,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(849,17): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(853,83): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(854,66): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(855,42): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(858,87): run-time error CSS1039: Token not allowed after unary operator: '-pildora'
(863,16): run-time error CSS1039: Token not allowed after unary operator: '-pos'
(869,22): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(871,35): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(881,25): run-time error CSS1039: Token not allowed after unary operator: '-pildora'
(882,22): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(896,17): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(908,55): run-time error CSS1039: Token not allowed after unary operator: '-fondo-gris'
(910,47): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(911,59): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(913,93): run-time error CSS1039: Token not allowed after unary operator: '-radio-s'
(915,92): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(916,31): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(916,62): run-time error CSS1039: Token not allowed after unary operator: '-menta-suave'
(917,32): run-time error CSS1039: Token not allowed after unary operator: '-magenta'
(917,60): run-time error CSS1039: Token not allowed after unary operator: '-magenta-suave'
(924,35): run-time error CSS1039: Token not allowed after unary operator: '-linea-fuerte'
(927,62): run-time error CSS1039: Token not allowed after unary operator: '-alto'
(927,119): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(928,52): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(935,17): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(939,77): run-time error CSS1039: Token not allowed after unary operator: '-linea'
(946,28): run-time error CSS1039: Token not allowed after unary operator: '-linea-fuerte'
(947,25): run-time error CSS1039: Token not allowed after unary operator: '-pildora'
(949,17): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(955,40): run-time error CSS1039: Token not allowed after unary operator: '-menta-suave'
(956,57): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(956,88): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(959,45): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(960,45): run-time error CSS1039: Token not allowed after unary operator: '-magenta-prof'
(961,27): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(967,25): run-time error CSS1039: Token not allowed after unary operator: '-pildora'
(968,22): run-time error CSS1039: Token not allowed after unary operator: '-fondo-gris'
(971,17): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(975,31): run-time error CSS1039: Token not allowed after unary operator: '-magenta-suave'
(975,60): run-time error CSS1039: Token not allowed after unary operator: '-magenta-prof'
(977,98): run-time error CSS1039: Token not allowed after unary operator: '-pildora'
(977,126): run-time error CSS1039: Token not allowed after unary operator: '-fondo-gris'
(980,41): run-time error CSS1039: Token not allowed after unary operator: '-verde'
(981,41): run-time error CSS1039: Token not allowed after unary operator: '-magenta'
(982,41): run-time error CSS1039: Token not allowed after unary operator: '-linea-fuerte'
(985,69): run-time error CSS1039: Token not allowed after unary operator: '-linea'
(987,61): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(988,98): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(1000,28): run-time error CSS1039: Token not allowed after unary operator: '-linea'
(1001,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(1016,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(1017,22): run-time error CSS1039: Token not allowed after unary operator: '-menta-suave'
(1027,22): run-time error CSS1039: Token not allowed after unary operator: '-verde'
(1032,36): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(1039,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(1040,37): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(1040,64): run-time error CSS1039: Token not allowed after unary operator: '-ease'
(1043,36): run-time error CSS1039: Token not allowed after unary operator: '-sombra'
(1053,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(1054,22): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(1075,52): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(1076,29): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(1084,31): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(1085,37): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(1093,22): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(1094,17): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(1097,46): run-time error CSS1039: Token not allowed after unary operator: '-radio-l'
(1097,74): run-time error CSS1039: Token not allowed after unary operator: '-fondo-gris'
(1105,22): run-time error CSS1039: Token not allowed after unary operator: '-carbon'
(1112,36): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(1113,51): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(1123,43): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(1154,28): run-time error CSS1039: Token not allowed after unary operator: '-linea'
(1155,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(1167,35): run-time error CSS1039: Token not allowed after unary operator: '-linea'
(1173,22): run-time error CSS1039: Token not allowed after unary operator: '-menta-suave'
(1175,17): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(1195,28): run-time error CSS1039: Token not allowed after unary operator: '-linea'
(1196,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(1206,25): run-time error CSS1039: Token not allowed after unary operator: '-texto-sec'
(1207,54): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(1211,84): run-time error CSS1039: Token not allowed after unary operator: '-verde-tinta'
(1220,25): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(1232,35): run-time error CSS1039: Token not allowed after unary operator: '-linea'
(1247,22): run-time error CSS1039: Token not allowed after unary operator: '-fondo-gris'
(1248,17): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(1252,36): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(1259,17): run-time error CSS1039: Token not allowed after unary operator: '-verde-prof'
(1267,54): run-time error CSS1039: Token not allowed after unary operator: '-radio-m'
(1267,82): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(1273,72): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(1330,26): run-time error CSS1039: Token not allowed after unary operator: '-menta'
(1331,21): run-time error CSS1039: Token not allowed after unary operator: '-tinta'
(1337,62): run-time error CSS1039: Token not allowed after unary operator: '-ease'
 */
/* Servicios Post (Grupo CTO). Identidad alineada con grupocto.es.
   Hoja canónica: .claude/skills/rediseno-vistas/assets/servicios-post.css.
   Cada sitio la copia como Content/<producto>.css sin cambios; los ajustes
   comunes se hacen aquí y se vuelven a copiar a todos los sitios. */

:root {
    --verde: #27aa5c;
    --verde-prof: #1a8546;
    --verde-tinta: #0f5a2e;
    --menta: #ccf4dc;
    --menta-suave: #ecfaf1;
    --tinta: #1f1f1f;
    --texto: #333;
    --texto-sec: #56605a;
    --linea: #d5dcd8;
    --linea-fuerte: #8a968f;
    --fondo: #fff;
    --fondo-gris: #f2f4f3;
    --carbon: #454545;
    --magenta: #cc3366;
    --magenta-prof: #a3264f;
    --magenta-suave: #fceaf0;
    --radio-s: 10px;
    --radio-m: 20px;
    --radio-l: 30px;
    --pildora: 999px;
    --sombra: 0 14px 32px -16px rgba(15, 90, 46, .35);
    --ease: cubic-bezier(.16, 1, .3, 1);
    --ancho: 1200px;
}

/* Base */

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

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--verde-prof) var(--fondo-gris);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--texto);
    background: var(--fondo);
    caret-color: var(--verde-prof);
}

::selection { background: var(--menta); color: var(--tinta); }

img, iframe, video { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tinta);
    text-wrap: balance;
}

h1 { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem); letter-spacing: -.015em; }
h2 { font-size: 1.5rem; margin-top: 2em; }
h3 { font-size: 1.125rem; margin-top: 1.75em; }
h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

p { margin: 0 0 1em; }
strong { font-weight: 600; }

a {
    color: var(--verde-prof);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

a:hover { color: var(--verde-tinta); }

:focus-visible {
    outline: 3px solid var(--verde-prof);
    outline-offset: 2px;
    border-radius: 4px;
}

.wrap {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: 20px;
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip {
    position: absolute;
    left: 20px;
    top: -60px;
    z-index: 10;
    padding: 10px 18px;
    border-radius: var(--pildora);
    background: var(--tinta);
    color: #fff;
}

.skip:focus { top: 12px; color: #fff; }

/* Cabecera */

.site-header__top {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-block: 14px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

/* El PNG del logo trae un margen transparente a la derecha: se recorta */
.brand > a:first-child { display: block; overflow: hidden; }
.brand img { display: block; height: 46px; width: auto; max-width: none; }

.brand__product {
    padding-left: 14px;
    border-left: 1px solid var(--linea);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tinta);
    text-decoration: none;
}

.site-header__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    font-size: .875rem;
}

.site-header__meta a:not(.btn) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--texto);
    text-decoration: none;
}

.site-header__meta a:not(.btn):hover { color: var(--verde-prof); }

.site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 0;
    padding: 0 20px;
    list-style: none;
    background: var(--menta);
    border-radius: 0 0 25px 25px;
}

.site-nav__list a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 50px;
    padding: 0 14px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--tinta);
    text-decoration: none;
}

.site-nav__list a .icon { width: 14px; height: 14px; color: var(--verde-prof); transition: transform .3s var(--ease); }
.site-nav__list a:hover .icon { transform: translateX(3px); }

.site-nav__list a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 9px;
    height: 2px;
    border-radius: 2px;
    background: var(--verde-prof);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
}

.site-nav__list a:hover::after,
.site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }

.site-nav__list a[aria-current="page"] { font-weight: 600; color: var(--verde-tinta); }

.site-nav__toggle { display: none; }

/* Botones */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 28px;
    border: 1.5px solid var(--verde-prof);
    border-radius: var(--pildora);
    background: var(--verde-prof);
    color: #fff;
    font: 500 1rem/1.2 inherit;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--ease), box-shadow .3s var(--ease);
}

.btn:hover {
    background: var(--verde-tinta);
    border-color: var(--verde-tinta);
    color: #fff;
    box-shadow: var(--sombra);
}

.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { border-radius: var(--pildora); }

.btn--outline { background: transparent; color: var(--verde-prof); }
.btn--outline:hover { background: var(--menta-suave); color: var(--verde-tinta); box-shadow: none; }

.btn--danger { background: transparent; border-color: var(--magenta); color: var(--magenta-prof); }
.btn--danger:hover { background: var(--magenta-suave); border-color: var(--magenta-prof); color: var(--magenta-prof); box-shadow: none; }

.btn--small { min-height: 38px; padding: 6px 18px; font-size: .875rem; }

.btn[disabled], .btn.locked { opacity: .55; cursor: not-allowed; box-shadow: none; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }

/* Estructura de página */

.main { flex: 1; padding-block: 24px 65px; }

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 32px;
    font-size: .8125rem;
    color: var(--tinta);
}

.crumbs a { color: var(--texto-sec); text-decoration: none; }
.crumbs a:hover { color: var(--verde-prof); text-decoration: underline; }
.crumbs a::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a968f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.crumbs [aria-current] { font-weight: 600; }

.page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 64px;
    align-items: start;
}

.page--full { grid-template-columns: minmax(0, 1fr); }

.lead { max-width: 62ch; font-size: 1.0625rem; color: var(--texto); }

.prose { max-width: 72ch; }
.prose p, .prose li { text-align: start !important; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .5em; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; font-size: .9375rem; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--linea); text-align: left; vertical-align: top; }
.prose th { background: var(--menta-suave); font-weight: 600; }

/* Barra lateral */

.sidebar { display: grid; gap: 40px; align-content: start; }
.sidebar h2 { margin: 0 0 14px; font-size: 1rem; }

.sidebar__links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.sidebar__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--menta-suave);
    font-weight: 500;
    font-size: .9375rem;
    color: var(--verde-tinta);
    text-decoration: none;
    transition: background-color .2s;
}

.sidebar__links a:hover { background: var(--menta); }
.sidebar__links .icon { transition: transform .3s var(--ease); }
.sidebar__links a:hover .icon { transform: translate(2px, -2px); }

.news { display: grid; gap: 10px; }
.news img { display: block; max-width: 100%; border-radius: var(--radio-s); }
.news a { font-weight: 500; }
.news time, .news .date { font-size: .8125rem; color: var(--texto-sec); }

.notes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.notes li { padding: 14px 16px; border: 1px solid var(--linea); border-radius: 14px; }
.notes cite { display: block; margin-top: 6px; font-size: .8125rem; font-style: normal; color: var(--texto-sec); }

/* Portada */

.hero {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: center;
    padding-block: 24px 64px;
}

.hero h1 { font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3rem); line-height: 1.08; letter-spacing: -.025em; }
.hero .lead { margin-bottom: 0; }

.hero__media {
    display: block;
    overflow: hidden;
    border-radius: var(--radio-l);
    box-shadow: var(--sombra);
}

.hero__media img { display: block; width: 100%; transition: transform .8s var(--ease); }
.hero__media:hover img { transform: scale(1.025); }

.band {
    padding-block: 40px;
    background: var(--fondo-gris);
    box-shadow: 0 0 0 100vmax var(--fondo-gris);
    clip-path: inset(0 -100vmax);
}

.prose a:not([href]) { color: var(--verde-prof); text-decoration: underline; cursor: pointer; }

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tile {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--verde-prof);
    text-decoration: none;
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}

.tile:hover { box-shadow: var(--sombra); transform: translateY(-2px); }

.tile__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--verde);
    color: #fff;
}

.tile__icon .icon { width: 22px; height: 22px; }

.tile__arrow {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    flex: none;
    border-radius: 7px;
    background: var(--fondo-gris);
    color: var(--tinta);
}

.tile__arrow .icon { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.tile:hover .tile__arrow .icon { transform: translate(2px, -2px); }

.sponsor { padding-block: 56px 0; }
.sponsor p { margin-bottom: 10px; font-size: .8125rem; color: var(--texto-sec); }
.sponsor a { display: block; max-width: 728px; overflow: hidden; border-radius: var(--radio-m); }
.sponsor img { display: block; width: 100%; }

/* Bloqueo reutilizable de operaciones en curso (ctoBusy). */
.busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(31, 31, 31, .38);
    cursor: progress;
    overflow: auto;
    overscroll-behavior: contain;
}
.busy-overlay[hidden] { display: none; }
.busy-overlay__dialog {
    width: min(100%, 420px);
    padding: 32px 28px;
    border-radius: var(--radio-m);
    background: var(--fondo);
    color: var(--tinta);
    box-shadow: var(--sombra);
    text-align: center;
    outline: none;
}
.busy-overlay__dialog h2 { margin: 0 0 12px; font-size: 1.25rem; }
.busy-overlay__dialog p { margin: 0; color: var(--texto-sec); }
.busy-overlay__spinner {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 20px;
    border: 3px solid var(--menta);
    border-top-color: var(--verde-prof);
    border-radius: 50%;
    animation: busy-spin 1s linear infinite;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy-overlay__spinner { animation: none; } }

/* Formularios */

.form { max-width: 460px; }
.form--wide { max-width: none; }

.form-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }

.field { margin-bottom: 20px; }

.field > label, .field__label {
    display: block;
    margin-bottom: 6px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--tinta);
}

.field--short { max-width: 220px; }

.input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 20px;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--pildora);
    background: #fff;
    color: var(--tinta);
    font: 400 1rem/1.4 inherit;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}

textarea.input { border-radius: var(--radio-m); min-height: 140px; resize: vertical; }

select.input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a8546' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 18px;
}

.input:hover { border-color: var(--verde-prof); }

.input:focus, .input:focus-visible {
    outline: none;
    border-color: var(--verde-prof);
    box-shadow: 0 0 0 4px var(--menta);
}

.input[readonly] { background: var(--fondo-gris); color: var(--texto); font-size: .8125rem; }

/* Desplegables compartidos (ctoSelect): búsqueda optativa dentro del panel. */
.search-select { position: relative; min-width: 0; }
.search-select.is-open { z-index: 10; }
.search-select__trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}
.search-select__trigger::after {
    content: "";
    flex: 0 0 18px;
    height: 18px;
    margin-left: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a8546' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-select__trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.search-select__value { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-select__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--radio-m);
    background: var(--fondo);
    box-shadow: var(--sombra);
    overflow: auto;
    overscroll-behavior: contain;
}
.search-select__panel[hidden], select[hidden], .ciudad-search-label[hidden] { display: none; }
.search-select__panel--above { top: auto; bottom: calc(100% + 8px); }
.search-select__panel > .input { flex-shrink: 0; min-width: 0; }
.search-select__list {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}
.search-select__option {
    padding: 10px 12px;
    min-height: 44px;
    border-radius: var(--radio-s);
    color: var(--tinta);
    overflow-wrap: anywhere;
    cursor: pointer;
}
.search-select__option:hover, .search-select__option.is-active { background: var(--menta); color: var(--verde-tinta); }
.search-select__option[aria-selected="true"] { background: var(--menta-suave); color: var(--verde-tinta); font-weight: 600; }
.search-select__option[aria-selected="true"].is-active { background: var(--menta); }
.search-select__option[aria-disabled="true"] { color: var(--texto-sec); cursor: default; background: var(--fondo-gris); }
.search-select__trigger:disabled { color: var(--texto-sec); cursor: default; background: var(--fondo-gris); }
.search-select__list:focus { outline: none; }
.search-select__status { flex-shrink: 0; margin: 0; font-size: .8125rem; color: var(--texto-sec); }
.search-select__status:empty { display: none; }

input[type="file"] { font: inherit; font-size: .875rem; }

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 16px;
    border: 1.5px solid var(--verde-prof);
    border-radius: var(--pildora);
    background: transparent;
    color: var(--verde-prof);
    font: 500 .875rem inherit;
    font-family: inherit;
    cursor: pointer;
}

.input.input-validation-error,
.input-validation-error {
    border-color: var(--magenta);
    background-color: var(--magenta-suave);
}

.field-validation-error {
    display: block;
    margin-top: 6px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--magenta-prof);
}

.field-validation-valid, .validation-summary-valid { display: none; }

.required { color: var(--magenta-prof); font-weight: 600; }

.check {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 2px 12px;
    align-items: start;
    margin-bottom: 16px;
    font-size: .9375rem;
}

.check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 3px 0 0;
    accent-color: var(--verde-prof);
}

.check label { display: inline; font-weight: 400; }
.check__body { grid-column: 2; }

.alert,
.validation-summary-errors {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--menta-suave);
    color: var(--verde-tinta);
    font-size: .9375rem;
}

.alert .icon { margin-top: 2px; }
.alert p { margin: 0; }
.alert:empty { display: none; }

.alert--error,
.validation-summary-errors { background: var(--magenta-suave); color: #7d1a3b; }

.validation-summary-errors ul { margin: 0; padding-left: 1.1em; }

.panel {
    padding: 28px 32px;
    border-radius: var(--radio-m);
    background: var(--menta-suave);
}

.panel h2 { font-size: 1.125rem; margin-top: 0; }
.panel .btn--outline { border-color: var(--verde-tinta); color: var(--verde-tinta); }
.panel p:last-child { margin-bottom: 0; }

.auth { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 360px); gap: 64px; align-items: start; }

.wait { display: grid; justify-items: start; gap: 8px; }
#loading { position: relative; width: 80px; height: 80px; margin-top: 16px; }

/* Hoja de respuestas */

.sheet-section { margin-top: 40px; }
.sheet-section > h2 { margin-bottom: 6px; }
.sheet-section > p { color: var(--texto-sec); font-size: .9375rem; }

.sheet {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) 6px repeat(5, minmax(0, 1fr));
    column-gap: 4px;
    row-gap: 16px;
    margin-top: 20px;
}

.sheet__cell { grid-column: 11; min-width: 0; }
.sheet__cell:nth-child(10n+1) { grid-column: 1; }
.sheet__cell:nth-child(10n+2) { grid-column: 2; }
.sheet__cell:nth-child(10n+3) { grid-column: 3; }
.sheet__cell:nth-child(10n+4) { grid-column: 4; }
.sheet__cell:nth-child(10n+5) { grid-column: 5; }
.sheet__cell:nth-child(10n+6) { grid-column: 7; }
.sheet__cell:nth-child(10n+7) { grid-column: 8; }
.sheet__cell:nth-child(10n+8) { grid-column: 9; }
.sheet__cell:nth-child(10n+9) { grid-column: 10; }

.sheet__cell label {
    display: block;
    margin-bottom: 4px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: var(--texto-sec);
    font-variant-numeric: tabular-nums;
}

.sheet__input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--radio-s);
    background: #fff;
    color: var(--verde-tinta);
    font: 600 1.0625rem/1 inherit;
    font-family: inherit;
    text-align: center;
    text-transform: uppercase;
    scroll-margin-bottom: 130px;
    transition: background-color .25s var(--ease), border-color .2s, box-shadow .2s, transform .25s var(--ease);
}

.sheet__input:hover { border-color: var(--verde-prof); }
.sheet__input:not(:placeholder-shown) { border-color: var(--verde); background: var(--menta); }

.sheet__input:focus, .sheet__input:focus-visible {
    outline: none;
    border-color: var(--verde-prof);
    box-shadow: 0 0 0 3px var(--verde-prof);
    transform: scale(1.06);
}

.sheet__input.input-validation-error {
    border-color: #b42318;
    background: #fff1f0;
    color: #b42318;
}

.sheet__input.input-validation-error:focus,
.sheet__input.input-validation-error:focus-visible {
    box-shadow: 0 0 0 3px #b42318;
}

#ErroresPlantilla.validation-summary-errors {
    background: #fff1f0;
    color: #b42318;
    border: 1px solid #b42318;
}

.sheet__cell:focus-within label { color: var(--verde-tinta); font-weight: 600; }

.sheet-bar {
    position: sticky;
    bottom: 16px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 40px;
    padding: 12px 12px 12px 28px;
    border: 1px solid transparent;
    border-radius: 36px;
}

/* Velo blanco: la hoja no asoma alrededor de la barra acoplada */
.sheet-bar::before {
    content: "";
    position: absolute;
    inset: -14px -14px -20px;
    z-index: -1;
    background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* La píldora se pinta sobre el velo */
.sheet-bar::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border: 1px solid var(--linea);
    border-radius: inherit;
    background: #fff;
    box-shadow: 0 18px 40px -18px rgba(31, 31, 31, .35);
    pointer-events: none;
}

.sheet-bar__count { margin: 0; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.sheet-bar__count strong { font-size: 1.125rem; color: var(--verde-tinta); }

.meter {
    flex: 1 1 160px;
    height: 8px;
    overflow: hidden;
    border-radius: var(--pildora);
    background: var(--menta);
}

.meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--verde-prof);
    transform: scaleX(var(--avance, 0));
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.sheet-bar__actions { display: flex; gap: 10px; margin-left: auto; }

.blocking { margin: 0; font-size: 1.0625rem; font-weight: 500; color: var(--tinta); }

/* Resultado */

.result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 24px 64px;
    align-items: center;
    margin-block: 28px 48px;
    padding: 36px 40px;
    border-radius: var(--radio-l);
    background: var(--menta);
}

.result__label { margin: 0 0 4px; font-size: .875rem; font-weight: 500; color: var(--verde-tinta); }

.result__score {
    margin: 0;
    font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.result__max { font-size: .35em; font-weight: 500; letter-spacing: 0; color: var(--verde-tinta); }
.result__sub { margin: 8px 0 0; font-size: .9375rem; color: var(--verde-tinta); font-variant-numeric: tabular-nums; }
.result__rank p { margin: 0; color: var(--tinta); }
.result__rank strong { font-variant-numeric: tabular-nums; }

.track { position: relative; height: 12px; margin: 50px 10px 8px; border-radius: var(--pildora); background: #fff; }

.track__mark {
    position: absolute;
    top: 50%;
    left: var(--pos, 0%);
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--verde-prof);
    box-shadow: 0 4px 10px -2px rgba(15, 90, 46, .5);
    animation: track-in 1.1s var(--ease) both;
}

.track__mark::after {
    content: attr(data-pos);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: var(--pildora);
    background: var(--verde-tinta);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@keyframes track-in { from { left: 0%; } }

.track__ends {
    display: flex;
    justify-content: space-between;
    font-size: .8125rem;
    color: var(--verde-tinta);
    font-variant-numeric: tabular-nums;
}

.scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px 56px; }
.scores h3 { margin: 0 0 12px; }

/* Comparativa de resultados */

.result-section { margin-top: 44px; }
.result-section h2 { margin: 0 0 16px; font-size: 1.25rem; }
.result__rank .track-label { margin-top: 16px; }
.note.note--warning { margin-top: 0; background: var(--fondo-gris); border-color: transparent; }
.note.note--warning p { max-width: none; }
.facts__extra { font-weight: 400; color: var(--texto-sec); }
.hint { margin: 10px 0 0; font-size: .875rem; color: var(--texto-sec); }

.cut { margin-bottom: 20px; padding: 18px 24px; border-left: 6px solid; border-radius: var(--radio-s); }
.cut p { margin: 0; }
.cut .cut__status { margin-bottom: 4px; font-size: 1.125rem; font-weight: 600; color: var(--tinta); }
.cut--in { border-color: var(--verde-prof); background: var(--menta-suave); }
.cut--out { border-color: var(--magenta); background: var(--magenta-suave); }

.histogram {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 160px;
    border-bottom: 1px solid var(--linea-fuerte);
}

.histogram__bar { flex: 1 1 0; min-height: 2px; height: var(--alto, 0%); border-radius: 6px 6px 0 0; background: var(--menta); }
.histogram__bar--you, .dot--you { background: var(--verde-prof); }

.histogram__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: .8125rem;
    color: var(--texto-sec);
    font-variant-numeric: tabular-nums;
}

.questions { margin-top: 44px; padding-top: 8px; border-top: 1px solid var(--linea); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.filters[hidden], .questions [hidden] { display: none; }

.filters__btn {
    min-height: 38px;
    padding: 6px 16px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--pildora);
    background: #fff;
    color: var(--tinta);
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

.filters__btn:hover { background: var(--menta-suave); }
.filters__btn[aria-pressed="true"] { border-color: var(--verde-prof); background: var(--verde-prof); color: #fff; }
.questions .table-scroll { margin-top: 12px; }

.answer--ok { font-weight: 600; color: var(--verde-prof); }
.answer--ko { font-weight: 600; color: var(--magenta-prof); }
.answer--na { color: var(--texto-sec); }

.tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--pildora);
    background: var(--fondo-gris);
    font-size: .75rem;
    font-weight: 500;
    color: var(--texto-sec);
    white-space: nowrap;
}

.tag--hard { background: var(--magenta-suave); color: var(--magenta-prof); }

.split { display: flex; height: 10px; margin-bottom: 14px; overflow: hidden; border-radius: var(--pildora); background: var(--fondo-gris); }
.split span { display: block; min-width: 2px; }
.split span + span { margin-left: 2px; }
.split__ok, .dot--ok { background: var(--verde); }
.split__ko, .dot--ko { background: var(--magenta); }
.split__na, .dot--na { background: var(--linea-fuerte); }

.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data th, .data td { padding: 11px 0; border-bottom: 1px solid var(--linea); }
.data th { font-weight: 400; text-align: left; }
.data td { font-weight: 600; text-align: right; color: var(--tinta); }
.data tr:last-child th, .data tr:last-child td { border-bottom: 0; font-weight: 600; color: var(--tinta); }

.dot { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; }

.note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin-top: 48px;
    padding: 18px 20px 18px 24px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
}

.note p { margin: 0; max-width: 56ch; font-size: .9375rem; }

/* Contenido */

.agenda { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }

.agenda li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 4px 16px;
    align-items: center;
    padding: 18px 20px;
    border-radius: var(--radio-m);
    background: var(--menta-suave);
}

.agenda__icon {
    display: grid;
    place-items: center;
    grid-row: span 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--verde);
    color: #fff;
}

.agenda h3 { margin: 0; font-size: 1rem; }
.agenda p { margin: 0; color: var(--verde-tinta); font-weight: 500; }

.promos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }

.promos a {
    display: block;
    overflow: hidden;
    border-radius: var(--radio-m);
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}

.promos a:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.promos img { display: block; width: 100%; }

.videos { display: grid; gap: 48px; }
.videos h2 { margin: 0 0 14px; font-size: 1.25rem; }

.embed {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radio-m);
    background: var(--tinta);
}

.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.downloads { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }

.contact { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }

.contact-heading { margin-bottom: 40px; }
.contact--form { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.contact--form h2 { margin-top: 0; font-size: 1.25rem; }
.contact--form > * { min-width: 0; }
.contact--form .field > label { display: inline-block; }
.contact--form .field > .required { font-weight: 600; }
.contact--form .input { margin-top: 6px; }
.contact--form .map { margin-top: 0; }
.contact-details .map + h2 { margin-top: 32px; }
.contact--form .map iframe { height: 320px; }
.contact--form [hidden] { display: none; }
.contact--form .btn:disabled { opacity: .65; cursor: not-allowed; }
.contact-privacy { font-size: .875rem; color: var(--texto-sec); }
.contact-wait { color: var(--verde-tinta); font-size: .9375rem; font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
    .contact--form { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

.contact-list { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; font-style: normal; }
.contact-list li, .contact-list p { display: flex; align-items: center; gap: 14px; margin: 0; }
.contact-list a { color: var(--tinta); text-decoration: none; }
.contact-list a:hover { color: var(--verde-prof); text-decoration: underline; }

.contact-list .icon {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 12px;
    border-radius: 50%;
    background: var(--menta);
    color: var(--verde-tinta);
}

.map { overflow: hidden; border-radius: var(--radio-l); background: var(--fondo-gris); }
.map iframe { display: block; width: 100%; height: 440px; border: 0; }

/* Pie */

.site-footer {
    padding: 64px 0 28px;
    border-radius: 60px 60px 0 0;
    background: var(--carbon);
    color: #f1f3f2;
    font-size: .9375rem;
}

.site-footer h2 { margin: 0 0 16px; font-size: 1rem; color: #fff; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--menta); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--menta); }

.site-footer__cols { display: grid; grid-template-columns: 1.5fr .9fr 1.3fr 1.1fr; gap: 40px 48px; }
.site-footer__cols p { margin: 0; color: #dfe9e3; }
.site-footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.site-footer__news a { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.site-footer__news img { width: 56px; height: 56px; flex: none; border-radius: 12px; object-fit: cover; }

.site-footer__contact li { display: flex; align-items: center; gap: 10px; }
.site-footer__contact .icon { color: var(--menta); }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .8125rem;
}

.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__social a { display: inline-flex; align-items: center; gap: 8px; }

/* Ajustes de composición */

.band > h2 { margin: 0 0 20px; font-size: 1.25rem; }
.panel { margin-bottom: 24px; }
.panel ul, .panel ol { margin: 0; padding-left: 1.2em; }
.panel li + li { margin-top: 4px; }
.form-cols--narrow { max-width: 640px; }
.field > .btn { margin-top: 10px; }

/* Tablas de datos anchas */

.table-scroll {
    margin-bottom: 24px;
    overflow-x: auto;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}

.data-table th, .data-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--linea);
    text-align: left;
    vertical-align: top;
}

.data-table thead th {
    background: var(--menta-suave);
    font-weight: 600;
    color: var(--verde-tinta);
    white-space: nowrap;
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; }
.data-table .center { text-align: center; }
.data-table p { margin: 0 0 6px; }
.data-table p:last-child { margin-bottom: 0; }

/* Lista de servicios */

.feature-list { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }

.feature {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 4px 20px;
    align-items: start;
    padding: 20px 24px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
}

.feature .tile__icon { grid-row: span 2; width: 56px; height: 56px; }
.feature h2 { margin: 0; font-size: 1.125rem; }
.feature p { margin: 0; }

/* Datos en pares etiqueta / valor */

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; margin: 0 0 24px; }
.facts dt { color: var(--texto-sec); }
.facts dd { margin: 0; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Pista de percentil o posición con su propia etiqueta */

.track-label { margin: 24px 0 0; font-size: .875rem; font-weight: 500; color: var(--verde-tinta); }

/* Diálogo nativo (<dialog>), sustituye a jQuery UI dialog */

.dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: var(--radio-m);
    box-shadow: 0 30px 60px -20px rgba(31, 31, 31, .45);
}

.dialog::backdrop { background: rgba(31, 31, 31, .5); }

.dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px 14px 24px;
    border-bottom: 1px solid var(--linea);
}

.dialog__head h2 { margin: 0; font-size: 1.125rem; }
.dialog__body { padding: 20px 24px 24px; }
.dialog__body img { display: block; width: 100%; height: auto; }

.icon-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: var(--fondo-gris);
    color: var(--tinta);
    cursor: pointer;
}

.icon-btn:hover { background: var(--menta); }

/* Contenido plegable (opiniones, textos largos) */

.more summary {
    padding: 8px 0;
    font-weight: 500;
    color: var(--verde-prof);
    cursor: pointer;
}

.more[open] summary { margin-bottom: 12px; }

/* Vídeo propio */

.video-frame { overflow: hidden; border-radius: var(--radio-m); background: var(--tinta); }
.video-frame video { display: block; width: 100%; }

/* Tooltip heredado (tipsy) y bloqueo (blockUI) */

.tipsy { padding: 6px; font-size: .75rem; }
.tipsy-inner { padding: 6px 10px; border-radius: 8px; background: var(--tinta); color: #fff; }

/* Adaptación */

@media (min-width: 1080px) {
    .sheet {
        grid-template-columns: repeat(5, minmax(0, 1fr)) 8px repeat(5, minmax(0, 1fr)) 8px repeat(5, minmax(0, 1fr)) 8px repeat(5, minmax(0, 1fr));
        column-gap: 6px;
        row-gap: 20px;
    }

    .sheet__cell:nth-child(20n) { grid-column: 23; }
    .sheet__cell:nth-child(20n+1) { grid-column: 1; }
    .sheet__cell:nth-child(20n+2) { grid-column: 2; }
    .sheet__cell:nth-child(20n+3) { grid-column: 3; }
    .sheet__cell:nth-child(20n+4) { grid-column: 4; }
    .sheet__cell:nth-child(20n+5) { grid-column: 5; }
    .sheet__cell:nth-child(20n+6) { grid-column: 7; }
    .sheet__cell:nth-child(20n+7) { grid-column: 8; }
    .sheet__cell:nth-child(20n+8) { grid-column: 9; }
    .sheet__cell:nth-child(20n+9) { grid-column: 10; }
    .sheet__cell:nth-child(20n+10) { grid-column: 11; }
    .sheet__cell:nth-child(20n+11) { grid-column: 13; }
    .sheet__cell:nth-child(20n+12) { grid-column: 14; }
    .sheet__cell:nth-child(20n+13) { grid-column: 15; }
    .sheet__cell:nth-child(20n+14) { grid-column: 16; }
    .sheet__cell:nth-child(20n+15) { grid-column: 17; }
    .sheet__cell:nth-child(20n+16) { grid-column: 19; }
    .sheet__cell:nth-child(20n+17) { grid-column: 20; }
    .sheet__cell:nth-child(20n+18) { grid-column: 21; }
    .sheet__cell:nth-child(20n+19) { grid-column: 22; }
}

@media (max-width: 960px) {
    .page, .auth, .contact, .hero { grid-template-columns: minmax(0, 1fr); }
    .page { gap: 56px; }
    .hero { gap: 32px; padding-bottom: 40px; }
    .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-header__meta a.site-header__contact:not(.btn) { display: none; }
}

@media (max-width: 720px) {
    /* Marca y acceso pasan a dos líneas si el botón de acceso es largo */
    .site-header__top { flex-wrap: wrap; gap: 12px; }
    .site-header__meta { min-width: 0; }
    .brand img { height: 38px; }
    .brand__product { font-size: 1rem; }

    .site-nav__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 50px;
        padding: 0 20px;
        border: 0;
        border-radius: 0 0 25px 25px;
        background: var(--menta);
        color: var(--tinta);
        font: 500 .9375rem inherit;
        font-family: inherit;
        cursor: pointer;
    }

    .site-nav__toggle .icon { transition: transform .3s var(--ease); }
    .site-nav__toggle[aria-expanded="true"] { border-radius: 0; }
    .site-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

    .site-nav__list { display: none; flex-direction: column; gap: 0; padding-bottom: 12px; }
    .site-nav__toggle[aria-expanded="true"] + .site-nav__list { display: flex; }
    .site-nav__list a { justify-content: space-between; }
    .site-nav__list a::after { display: none; }

    .form-cols, .promos { grid-template-columns: minmax(0, 1fr); }
    .result { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
    .histogram { gap: 2px; height: 120px; }
    .data-table .tag { margin: 4px 0 0; white-space: normal; }
    .cut { padding: 16px 18px; }
    .sheet__input { height: 40px; font-size: 1rem; border-radius: 8px; scroll-margin-bottom: 190px; }
    .sheet-bar { padding: 14px 16px; border-radius: 24px; }
    .sheet-bar__actions { width: 100%; margin-left: 0; }
    .sheet-bar__actions .btn { flex: 1; padding-inline: 12px; }
    .site-footer { padding-top: 48px; border-radius: 32px 32px 0 0; }
    .site-footer__cols { grid-template-columns: minmax(0, 1fr); }
    .map iframe { height: 320px; }
    .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .facts dd { margin-bottom: 10px; }
    .feature { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; gap: 4px 14px; }
    .feature .tile__icon { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .site-header, .site-footer, .sidebar, .crumbs, .sheet-bar, .note { display: none; }
    .page { display: block; }
}