/* ===================================================================== Reforma Con Cabeza — Base + Componentes Requiere tokens.css cargado antes (usa var(--rcc-*)). Carga las fuentes en el del layout (mejor que @import): ===================================================================== */ /* ---- Reset mínimo ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--rcc-font-body); font-size: var(--rcc-fs-body); line-height: var(--rcc-lh-body); color: var(--rcc-ink); background: var(--rcc-cream); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: var(--rcc-green); text-underline-offset: 3px; } ::selection { background: var(--rcc-green-line); } :focus-visible { outline: 2px solid var(--rcc-green); outline-offset: 2px; border-radius: 4px; } /* ---- Tipografía ---- */ h1, h2, h3, .rcc-display { font-family: var(--rcc-font-display); font-weight: 500; line-height: var(--rcc-lh-head); letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: var(--rcc-fs-h1); line-height: var(--rcc-lh-tight); } h2 { font-size: var(--rcc-fs-h2); } h3 { font-size: var(--rcc-fs-h3); } .rcc-lead { font-size: var(--rcc-fs-lead); color: var(--rcc-ink-soft); line-height: 1.55; } .rcc-em { font-style: italic; color: var(--rcc-terracota); } /* el matiz humano dentro de un titular */ .rcc-prose { max-width: var(--rcc-maxw-prose); } .rcc-prose p { font-size: var(--rcc-fs-lead); line-height: 1.65; margin-bottom: var(--rcc-sp-4); } .rcc-kicker { /* etiqueta de sección / categoría */ font-size: var(--rcc-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--rcc-terracota); } .rcc-label { /* micro-etiqueta neutra */ font-size: var(--rcc-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--rcc-ink-faint); } /* ---- Layout ---- */ .rcc-container { max-width: var(--rcc-maxw); margin-inline: auto; padding-inline: var(--rcc-sp-5); } /* ---- Wordmark + monograma (ver logo.html para el markup) ---- */ .rcc-wordmark { font-family: var(--rcc-font-display); display: inline-flex; align-items: baseline; gap: .3em; } .rcc-wordmark b { font-weight: 600; font-style: normal; } .rcc-wordmark i { font-weight: 500; font-style: italic; color: var(--rcc-terracota); } .rcc-mono { /* tile del monograma; contiene el chevron + "rcc" */ display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--rcc-r-md); background: var(--rcc-green); color: #fff; position: relative; font-family: var(--rcc-font-display); font-weight: 600; letter-spacing: .04em; box-shadow: var(--rcc-shadow-sm); } /* ---- Botones ---- */ .btn { display: inline-flex; align-items: center; gap: .5em; cursor: pointer; font-family: inherit; font-weight: 700; font-size: var(--rcc-fs-body); padding: 13px 22px; border-radius: var(--rcc-r-md); border: none; text-decoration: none; transition: background .15s, transform .05s; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--rcc-green); color: #fff; box-shadow: var(--rcc-shadow-sm); } .btn--primary:hover { background: var(--rcc-green-dark); } .btn--secondary { background: var(--rcc-surface); color: var(--rcc-green); border: 1.5px solid var(--rcc-green); } .btn--secondary:hover { background: var(--rcc-green-tint); } .btn--ghost { background: none; color: var(--rcc-terracota); padding-inline: 6px; text-decoration: underline; text-underline-offset: 3px; } .btn--lead { background: var(--rcc-terracota); color: #fff; } /* CTA de lead-gen (afiliado) */ .btn--lead:hover { background: var(--rcc-terracota-dark); } /* ---- Sellos de confianza / badges ---- */ .badge { display: inline-flex; align-items: center; gap: 7px; font-size: var(--rcc-fs-xs); font-weight: 600; padding: 7px 13px; border-radius: var(--rcc-r-pill); border: 1px solid; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; } .badge--green { color: var(--rcc-green-dark); background: var(--rcc-green-tint); border-color: var(--rcc-green-line); } .badge--terracota { color: var(--rcc-terracota-dark); background: var(--rcc-terracota-tint); border-color: var(--rcc-terracota-line); } .badge--neutral { color: var(--rcc-ink-soft); background: #F4F1EA; border-color: var(--rcc-line); } .badge--plain::before { display: none; } /* sin punto, p. ej. "Fuente: AEAT" */ /* ---- Tarjetas ---- */ .card { background: var(--rcc-surface); border: 1px solid var(--rcc-line); border-radius: var(--rcc-r-xl); padding: var(--rcc-sp-6); } .card--flush { padding: 0; overflow: hidden; } /* tarjeta con imagen a sangre */ /* ---- Formularios ---- */ .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-size: var(--rcc-fs-sm); font-weight: 600; } .field .hint { font-size: var(--rcc-fs-xs); font-weight: 400; color: var(--rcc-ink-faint); } .input, select.input { width: 100%; padding: 13px 14px; font-family: inherit; font-size: var(--rcc-fs-body); color: var(--rcc-ink); background: var(--rcc-surface); border: 1.5px solid var(--rcc-line); border-radius: var(--rcc-r-md); } .input:focus, select.input:focus { outline: none; border-color: var(--rcc-green); box-shadow: 0 0 0 3px var(--rcc-green-tint); } .input-euro { position: relative; } .input-euro > span { position: absolute; left: 13px; top: 13px; color: var(--rcc-ink-faint); } .input-euro .input { padding-left: 28px; } /* ---- Bloque de resultado (la calculadora) ---- */ .result { background: var(--rcc-green-tint); border: 1px solid var(--rcc-green-line); border-radius: var(--rcc-r-lg); padding: var(--rcc-sp-5); } .result__label { font-size: var(--rcc-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rcc-ink-soft); } .result__big { font-family: var(--rcc-font-display); font-weight: 600; color: var(--rcc-green); font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem); line-height: 1.1; margin-top: 4px; } .result__row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--rcc-fs-sm); padding: 3px 0; } .result__row span:last-child { font-weight: 600; } /* ---- Aviso honesto · "cuándo NO vale la pena" (el ancla de confianza) ---- */ .callout { background: var(--rcc-warn-bg); border: 1px solid var(--rcc-warn-line); border-left: 4px solid var(--rcc-warn); border-radius: var(--rcc-r-md); padding: 14px 18px; color: var(--rcc-warn-ink); font-size: var(--rcc-fs-sm); line-height: 1.55; } .callout strong { color: var(--rcc-warn-ink); } /* ---- CTA de lead-gen enmarcado (presupuestos / afiliado) ---- */ .cta-box { background: var(--rcc-surface); border: 1px dashed var(--rcc-terracota); border-radius: var(--rcc-r-lg); padding: var(--rcc-sp-4); text-align: center; } /* ---- Disclaimer fiscal (siempre presente: YMYL) ---- */ .disclaimer { font-size: var(--rcc-fs-xs); color: var(--rcc-ink-faint); line-height: 1.45; } /* ---- Imagen placeholder (mientras no hay foto real) ---- */ .img-ph { background: repeating-linear-gradient(135deg, #F4F1EA, #F4F1EA 10px, #EFEBE1 10px, #EFEBE1 20px); display: flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; font-size: 11px; color: #A89C8C; } /* ---- Iconos de línea (Lucide/Feather): trazo fino, un color ---- */ .rcc-icon { width: 24px; height: 24px; stroke: var(--rcc-green); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }