/* ROCCA · capa "moderno" (24-sep-2026, sobre noche.css): tipografía geométrica Jost (la libre más cercana a Futura),
   recuadros de línea punteada sin relleno, logo con trazo fino y wordmark geométrico. Pedido de Guillo con la referencia de Fackers. */
:root { --geo: 'Jost', 'Futura', 'Century Gothic', sans-serif; --serif: var(--geo); --sans: var(--geo); --punteado: 1px dashed rgba(242,239,231,.38); }
body { font-family: var(--geo); font-weight: 400; letter-spacing: .005em; }
h1, h2, h3, .logo-nombre, .tr-palabra, .perfil-texto h2, .cierre h3, .contacto-cierre h3, .pregunta, .cv-cabeza h1, .estudio-titulo, .opcion-grande strong, .paso legend, .pasos li h3, .tarjeta h3, .cv-cierre h2, .cv-tarjeta h2, .listo h2 { font-family: var(--geo); font-weight: 500; letter-spacing: -.01em; text-transform: none; }
h1 { font-weight: 500; line-height: 1.02; letter-spacing: -.02em; }
.portada-dos h1, .portada h1 { text-transform: uppercase; letter-spacing: -.01em; font-weight: 500; }
h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.06; }
h3 { font-weight: 500; }
.acento { font-family: var(--geo); font-style: italic; font-weight: 400; color: var(--terracota); letter-spacing: 0; }
.perfil-frase, .opinion blockquote, .pitch { font-family: 'Instrument Serif', Georgia, serif; } /* la cursiva editorial se queda solo en citas */
.antetitulo { font-family: var(--geo); font-weight: 500; letter-spacing: .26em; }
.boton { font-family: var(--geo); font-weight: 500; letter-spacing: .12em; }
.menu a:not(.boton) { font-family: var(--geo); font-weight: 500; letter-spacing: .16em; }
.entradilla { font-weight: 300; font-size: clamp(17px, 1.5vw, 20px); }
.numero, .tarjeta .numero, .pasos li::before, .lista-captacion span, .estudio-pasos b { font-family: var(--geo); font-style: normal; font-weight: 500; }
.tarjeta .numero { font-size: 30px; color: var(--marfil); }
.pasos li::before { font-size: 40px; color: var(--marfil); }

/* Recuadros: línea punteada, sin relleno, esquinas suaves */
.tarjeta, .opinion, .formulario, .demanda-inicio, .cv-datos > div, .cv-arriendo, .cv-cierre, .cv-tarjeta, .listo, .calc-resultado, .doc, .caja-contacto, .vacio, .filtros, .ficha-tarjeta, .cv-puesto, .decision .op, .opcion-grande span, .demanda li, .dictado, .voz-panel, .estudio-acceso .formulario {
  background: transparent !important; border: var(--punteado) !important; border-radius: 14px; box-shadow: none;
}
.tarjeta.inclina::after, .opinion.inclina::after { display: none; }
.inclina:hover { box-shadow: none; }
.tarjeta:hover, .opinion:hover, .ficha-tarjeta:hover, .opcion-grande input:checked + span, .doc.ok { border-color: rgba(242,239,231,.9) !important; }
.tarjeta { padding: clamp(26px, 2.8vw, 36px) clamp(24px, 2.6vw, 34px); gap: 10px; }
.tarjeta h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.08; margin-top: 2px; }
.tarjeta p { font-weight: 300; }
.tarjeta ul { margin-top: 6px; }
.tarjeta li::before { background: var(--marfil); }
/* Escalonado como la referencia: 1 arriba, 2 más abajo, 3 más abajo aún */
.rejilla-3 { gap: 22px; align-items: start; }
.tarjeta:nth-child(2) { transform: translateY(48px); } .tarjeta:nth-child(3) { transform: translateY(96px); }
.con-vida .tarjeta:nth-child(2).inclina { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(48px); }
.con-vida .tarjeta:nth-child(3).inclina { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(96px); }
#servicios { padding-bottom: clamp(140px, 16vw, 230px); }
.campo input, .campo select, .campo textarea { background: transparent; border: var(--punteado); border-radius: 10px; font-family: var(--geo); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-style: solid; }
.chip span { background: transparent; border: var(--punteado); }
.chip input:checked + span { background: var(--marfil); color: var(--carbon); border: 1px solid var(--marfil); }
.decision .buena, .decision .mala, .decision .costo, .cv-principal { background: transparent !important; }
.decision .buena { color: #BFE0CF; } .decision .mala { color: #F0B9AB; } .decision .costo { color: var(--marfil); }
.cv-principal { border: var(--punteado); border-radius: 14px; }
.cv-principal strong { font-family: var(--geo); font-weight: 500; }
.perfil-cifras b, .cv-grande, .arr-dato strong, .precio-grande, .calc-total, .cv-datos b, .cv-arriendo b { font-family: var(--geo); font-weight: 500; letter-spacing: -.02em; }
.perfil-cifras li { border-left: var(--punteado); }
.perfil-cifras li:nth-child(3n+1) { border-left: 0; }
.perfil-trayectoria li { border-top: var(--punteado); }
.zonas, .cinta { border-top: var(--punteado); border-bottom: var(--punteado); }
.zonas li { font-family: var(--geo); font-weight: 500; letter-spacing: .18em; }
.pasos li { border-top: var(--punteado); }
.pie { border-top: var(--punteado); }
.contacto-cierre { border-top: var(--punteado); }
.encabezado .contenedor { border: var(--punteado); }
.perfil-foto img { border-radius: 14px; }
.tarjeta-rocca { border: 1px solid rgba(242,239,231,.12); }

/* Logo modernizado: trazo fino y redondeado, wordmark geométrico con tracking amplio */
.logo svg, .pie .logo svg { stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.logo .logo-nombre { font-family: var(--geo); font-weight: 500; font-size: 22px; letter-spacing: .42em; margin-right: -.42em; }
.logo .logo-descriptor { font-family: var(--geo); font-weight: 400; letter-spacing: .34em; font-size: 8.5px; margin-top: 3px; }
.con-vida .logo:hover .logo-nombre { letter-spacing: .52em; }
.tarjeta-rocca .tr-palabra { font-family: var(--geo); font-weight: 500; letter-spacing: .42em; }
.tarjeta-rocca .tr-relieve { stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.dibuja-logo .encabezado .logo svg path { stroke-linecap: round; }
.zonas li a { color: inherit; text-decoration: none; } .zonas li a:hover { color: var(--dorado); }

/* Cifras del perfil: el número nunca se monta sobre la columna vecina (26-sep). */
.perfil-cifras b { font-size: clamp(26px, 3vw, 46px); white-space: nowrap; overflow-wrap: normal; }
.perfil-cifras b small { display: block; margin: 8px 0 0; vertical-align: baseline; }
@media (max-width: 640px) { .perfil-cifras b { font-size: clamp(26px, 7vw, 36px); } }