/*
Theme Name: Cancelamos tu Hipoteca
Theme URI: https://cancelamostuhipoteca.es
Author: Cancelamos tu Hipoteca
Description: Tema propio escrito desde cero para Cancelamos tu Hipoteca. Sin builders, sin dependencias de terceros -- mismo CSS ya verificado en la versión estática previa del sitio (build.py), portado tal cual. Funcionalidad (SEO, schema, consentimiento GA4, formularios) vive en mu-plugins, no en el tema.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: cancelamostuhipoteca
*/

/* ============================================================
   Cancelamos tu Hipoteca — hoja de estilos única del sitio
   Portada tal cual desde /data/site/assets/style.css (versión
   estática, 13 sep 2026) al pivotar a WordPress -- mismo diseño,
   ya verificado, no se rediseña desde cero.
   ============================================================ */

/* Tipografías autoalojadas (15 sep 2026, hallazgo de Inmodeso): cargarlas
   directamente desde fonts.googleapis.com/gstatic.com envía la IP del
   visitante a Google en cada carga de página, antes de cualquier
   consentimiento de cookies. Solo el subconjunto "latin" (cubre todo el
   español: vocales con tilde, ñ, ¿¡, todo dentro de U+0000-00FF) -- no
   hacen falta cirílico/griego/vietnamita para este sitio. Rutas
   relativas a este propio fichero (wp-content/themes/.../fonts/), sin
   depender de PHP para resolver la URL. */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/lora-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/lora-italic-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/source-sans-3.woff2') format('woff2');
}

:root {
  --navy: #1a2744;
  --navy-soft: #3d4d6a;
  --navy-soft-2: #4a5a74;
  --accent: #4a8fd4;
  --accent-dark: #3b73ab;
  --warm: #b8703f;
  --warm-light: #f3e6d8;
  --border: #d4dae8;
  --bg-light: #edf1f7;
  --bg-light-2: #f0f4fa;
  --white: #ffffff;
  --text: #22304a;
  --text-muted: #5a6b85;
  --ok: #2e7d4f;
  --radius: 10px;
  --shadow: 0 4px 18px rgba(26, 39, 68, 0.08);
  --max-width: 1120px;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: bold;
}
.skip-link:focus { left: 0; }

/* Oculta visualmente sin quitar del árbol de accesibilidad -- para
   encabezados de sección que estructuran la página para lectores de
   pantalla pero no llevan un título visible en el diseño (ej. las
   tarjetas de "situación" de la home, que van directas de H1 a H3 sin
   esto). No usar display:none/visibility:hidden, eso sí las oculta
   también para lectores de pantalla. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  font-size: 16px;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--navy);
  line-height: 1.25;
  margin: 1.6em 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: 2.2rem; margin-top: 0; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.1em; }
a { color: var(--accent-dark); text-decoration: underline; text-decoration-thickness: 1px; transition: color .15s ease; }
a:hover { color: var(--navy); }

ul, ol { padding-left: 1.4em; margin: 0 0 1.1em; }
li { margin-bottom: 0.4em; }

hr { border: none; border-top: 1px solid var(--border); margin: 2.2em 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 0.95rem;
}
caption { text-align: left; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.4em; }
th, td {
  border: 1px solid var(--border);
  padding: 0.6em 0.8em;
  text-align: left;
}
th { background: var(--bg-light); color: var(--navy); font-family: var(--font-serif); }
.table-wrap { overflow-x: auto; margin: 1.4em 0; }
.table-wrap table { margin: 0; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header ---------- */
.site-header { background: var(--navy); color: var(--white); }
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.logo { font-family: var(--font-serif); font-size: 1.25rem; color: var(--white); text-decoration: none; font-weight: bold; }
.header-phone {
  display: flex; align-items: center; gap: 7px;
  color: var(--white); text-decoration: none;
  font-weight: 600; font-size: 0.95rem;
  margin-left: auto; margin-right: 4px;
  opacity: 0.95; transition: opacity .15s ease;
}
.header-phone:hover { opacity: 1; text-decoration: underline; }
.header-phone svg { width: 17px; height: 17px; color: var(--accent); flex: none; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; margin: 0; color: var(--white); }
.nav-toggle svg { width: 26px; height: 26px; display: block; }
.main-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; }
.main-nav a { color: var(--white); text-decoration: none; font-size: 0.95rem; opacity: 0.9; transition: opacity .15s ease; }
.main-nav a:hover, .main-nav a[aria-current="page"] { opacity: 1; text-decoration: underline; }

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .header-phone span { display: none; }
  .header-phone { margin-right: 0; }
  .header-phone svg { width: 22px; height: 22px; }
  .main-nav { width: 100%; }
  .main-nav ul { flex-direction: column; gap: 0; max-height: 0; overflow: hidden; transition: max-height .25s ease; }
  .main-nav.open ul { max-height: 400px; }
  .main-nav ul li { border-top: 1px solid rgba(255,255,255,0.12); }
  .main-nav ul li:first-child { border-top: none; }
  .main-nav a { display: block; padding: 12px 2px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--navy) 0%, #22314f 100%);
  color: var(--white); padding: 64px 0 56px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 15% 20%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 60% at 15% 20%, black 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(74,143,212,0.22) 0%, transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; }
.hero .eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--accent); font-weight: bold; }
.hero h1 { color: var(--white); max-width: 780px; }
.hero p.lead { color: #cfd8ea; max-width: 620px; font-size: 1.1rem; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.hero-trust { margin: 16px 0 0; font-size: 0.85rem; color: #a9bcdb; letter-spacing: 0.01em; }

.btn {
  display: inline-block; padding: 13px 26px; border-radius: 999px;
  font-weight: bold; text-decoration: none; font-family: var(--font-sans);
  font-size: 0.98rem; border: 2px solid transparent; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--navy); }
.btn-primary:hover { background: #5c9de0; color: var(--navy); }
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn-outline:hover { border-color: var(--white); }

/* ---------- Stat row ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; padding: 36px 0; border-bottom: 1px solid var(--border); }
.stat { text-align: center; }
.stat .num { font-family: var(--font-serif); font-size: 2rem; color: var(--warm); display: block; font-variant-numeric: tabular-nums; }
.stat .label { color: var(--text-muted); font-size: 0.92rem; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin: 32px 0; }
.card { background: var(--bg-light); border-radius: var(--radius); padding: 26px; border: 1px solid var(--border); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.card .kicker { color: var(--accent-dark); font-weight: bold; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.card h3 { margin-top: 0.3em; }
.card a.more { font-weight: bold; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 32px 0; }
@media (min-width: 600px) and (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
.step .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-family: var(--font-serif); font-weight: bold;
  font-variant-numeric: tabular-nums; margin-bottom: 10px;
}

/* ---------- Section ---------- */
.section { padding: 56px 0; }
.section-alt { background: var(--bg-light-2); }
.section-title { text-align: left; max-width: 680px; }
.section-title p { color: var(--text-muted); }

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.checklist li::before {
  content: "✓"; color: var(--warm); font-weight: bold;
  background: var(--warm-light); border-radius: 50%;
  width: 24px; height: 24px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}

/* ---------- Forms ---------- */
.form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; max-width: 620px; }
.form-card.on-dark { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); }
.form-card.on-dark label { color: var(--white); }
.form-card.on-dark small { color: #b9c3d8; }

form .field { margin-bottom: 16px; }
label { display: block; font-weight: bold; margin-bottom: 6px; font-size: 0.92rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-sans); font-size: 1rem; background: var(--white); color: var(--text);
}
textarea { min-height: 100px; resize: vertical; }
.field-checkbox { display: flex; align-items: flex-start; gap: 8px; }
.field-checkbox input { margin-top: 4px; }
.field-checkbox label { font-weight: normal; margin: 0; font-size: 0.88rem; }
small.legal { display: block; color: var(--text-muted); font-size: 0.8rem; margin-top: 4px; }

.legal-details { margin-top: 10px; }
.legal-details summary { cursor: pointer; color: var(--text-muted); font-size: 0.8rem; user-select: none; }
.legal-details summary:hover { color: var(--text); }
.legal-details small.legal { margin-top: 6px; }

.hp-field { position: absolute; left: -9999px; top: -9999px; }

.form-alt-contact { text-align: center; font-size: 0.88rem; color: var(--text-muted); margin: 12px 0 0; }
.form-card.on-dark .form-alt-contact { color: #b9c3d8; }
.form-status { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 8px; font-size: 0.92rem; }
.form-status.ok { display: block; background: #e4f3e9; color: #1f5b39; }
.form-status.err { display: block; background: #fbe6e6; color: #8a2323; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--border); padding: 18px 0; transition: background-color .15s ease; }
.faq-item summary {
  cursor: pointer; font-family: var(--font-serif); color: var(--navy); font-size: 1.05rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; color: var(--white); font-size: 1.1rem; font-weight: bold;
  background: var(--accent); border-radius: 50%; width: 24px; height: 24px;
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background-color .2s ease;
}
.faq-item[open] summary::after { content: "–"; background: var(--navy); }
.faq-item:hover summary { color: var(--accent-dark); }
.faq-item .faq-a { padding-top: 10px; color: var(--text-muted); animation: faq-in .2s ease; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Article ---------- */
.article-header { background: var(--bg-light); padding: 44px 0 34px; border-bottom: 1px solid var(--border); }
.article-meta { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 6px; }
.article-body { max-width: 760px; margin: 0 auto; padding: 44px 20px; }
.cta-box { background: var(--bg-light); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; padding: 18px 22px; margin: 1.6em 0; }
.cta-box p { margin: 0; }
.related-posts { background: var(--bg-light-2); border-radius: var(--radius); padding: 24px; margin-top: 2em; }
.related-posts h3 { margin-top: 0; }
.related-posts ul { list-style: none; padding: 0; margin: 0; }
.related-posts li { margin-bottom: 8px; }

/* ---------- Blog index ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.post-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; background: var(--white); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.post-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.post-card .tag { font-size: 0.78rem; color: var(--accent-dark); font-weight: bold; text-transform: uppercase; }
.post-card h3 { margin: 6px 0 8px; font-size: 1.15rem; }
.post-card p { color: var(--text-muted); font-size: 0.94rem; }
.post-card-icon { width: 34px; height: 34px; color: var(--accent); margin-bottom: 10px; }
.post-card-icon svg { width: 100%; height: 100%; }
.post-card-date { display: block; margin-top: 12px; font-size: 0.8rem; color: var(--text-muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #c3cce0; padding: 44px 0 26px; margin-top: 48px; font-size: 0.92rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-grid h2 { color: var(--white); font-family: var(--font-serif); margin-top: 0; font-size: 1rem; }
.footer-grid a { color: #c3cce0; text-decoration: none; display: block; margin-bottom: 8px; transition: color .15s ease; }
.footer-grid a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 18px; font-size: 0.85rem; color: #9aa6c2; }
.footer-bottom a { color: #9aa6c2; }

/* ---------- Aviso de cookies ---------- */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--navy); color: #dbe3f2; padding: 16px 20px; box-shadow: 0 -4px 18px rgba(0,0,0,0.18); display: none; }
.cookie-bar.show { display: block; }
.cookie-bar-inner { max-width: var(--max-width); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.cookie-bar p { margin: 0; font-size: 0.88rem; flex: 1 1 320px; }
.cookie-bar a { color: #fff; }
.cookie-bar-actions { display: flex; gap: 10px; flex: none; }
.cookie-btn { border-radius: 999px; padding: 9px 18px; font-size: 0.86rem; font-weight: bold; cursor: pointer; border: 2px solid transparent; font-family: var(--font-sans); transition: background-color .15s ease, border-color .15s ease; }
.cookie-btn-accept { background: var(--accent); color: var(--navy); }
.cookie-btn-accept:hover { background: #5c9de0; }
.cookie-btn-reject { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.cookie-btn-reject:hover { border-color: #fff; }

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px;
  background: #25D366; color: white; width: 56px; height: 56px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,0.28); z-index: 50;
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 20px rgba(0,0,0,0.32); }
.wa-float svg { width: 28px; height: 28px; }

/* ---------- Utilidades ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.eyebrow-dark { color: var(--accent-dark); font-weight: bold; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.04em; }

@media (max-width: 720px) {
  .hero { padding: 44px 0 40px; }
  h1 { font-size: 1.7rem; }
  .wa-float { width: 48px; height: 48px; right: 14px; bottom: 14px; }
  .wa-float svg { width: 24px; height: 24px; }
}