/* hansen.css - GENERADO por _ficha/build/build.py (brand-layer.css + hansen-components.css). No editar a mano. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/assets/fonts/newsreader-normal.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 600; font-display: swap; src: url(/assets/fonts/newsreader-italic.woff2) format("woff2"); }
@font-face { font-family: "Newsreader Glare"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/assets/fonts/newsreader-italic.woff2) format("woff2"); }
@font-face { font-family: "Newsreader Glare"; font-style: italic; font-weight: 300 600; font-display: swap; src: url(/assets/fonts/newsreader-italic.woff2) format("woff2"); }
  /* ============================================================
     Hansen brand layer — red / black / white on the same design
     system. Red sampled from the logo (#d01018).
     ============================================================ */
  :root, body {
    --hansen-red: #d01018;
    --hansen-red-deep: #5a1116;
    --black-900: #111111;
    --green-700: var(--hansen-red-deep);
    --orange: var(--hansen-red);
    --gray-alpha-200: #ffffff26;
    --gray-alpha-500: #ffffff8c;
  }
  ::selection { background: var(--hansen-red); color: #fff; }
  .nav-overlay { background-color: rgba(17, 17, 17, 0.5); }
  .caption .h6,
  [data-hero="scroll"],
  .beliefs-item > .b4,
  .faq-dropdown > .text-color-white-50 { color: var(--hansen-red); }
  .amenities-progress-line { background-color: var(--hansen-red); }
  .projects .splide__pagination__page.is-active { color: var(--hansen-red) !important; }
  .input:focus-visible, .input[data-wf-focus-visible] { border-bottom-color: var(--hansen-red); }

  /* Logo: the real Peter Hansen e Hijos mark, transparent, no backing plate */
  .logo.nav-logo { width: auto; height: 3.4rem; }
  .logo__img { width: auto; height: 100%; object-fit: contain; }
  .footer-logo { width: 6.2rem; height: 3rem; object-fit: contain; justify-self: start; align-self: start; }
  .modal-logo { width: auto; height: 2.6rem; object-fit: contain; }
  @media (max-width: 479px) { .logo__img { height: 2.8rem; } }

  /* Hero title: HANSEN (6 wide caps) vs the template's 5-letter word */
  .hero-title { font-size: 15rem; }
  @media (max-width: 767px) { .hero-title { font-size: 6.5rem; } }
  @media (max-width: 479px) { .hero-title { font-size: 3.6rem; } }
  .page-sub .hero-title { font-size: 10rem; }
  @media (max-width: 767px) { .page-sub .hero-title { font-size: 4.4rem; } }
  @media (max-width: 479px) { .page-sub .hero-title { font-size: 2.4rem; } }
  [data-hero='title'] .char-mask { margin-right: 0 !important; }
  [data-hero='title'] .char-mask:nth-child(n) { left: 0 !important; }

  /* Services dropdown (hover on desktop, expanded list inside the mobile menu) */
  .nav__list-item.has-dropdown { position: relative; }
  .nav__dropdown-toggle { gap: 0.5rem; }
  .nav__dropdown-toggle svg { width: 0.7rem; height: 0.7rem; flex: none; transition: transform 0.2s ease; }
  .has-dropdown:hover .nav__dropdown-toggle svg, .has-dropdown:focus-within .nav__dropdown-toggle svg { transform: rotate(180deg); }
  .has-dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1.25rem; }
  .nav__dropdown {
    position: absolute; top: 100%; left: 50%; z-index: 20;
    min-width: 17rem; margin-top: 1rem; padding: 1.25rem 1.5rem;
    display: flex; flex-direction: column; gap: 0.9rem;
    background: rgba(17, 17, 17, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--white-alpha-50);
    opacity: 0; pointer-events: none; transform: translate(-50%, 0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .has-dropdown:hover .nav__dropdown, .has-dropdown:focus-within .nav__dropdown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
  .nav__dropdown-link {
    font-family: var(--_fonts---family--button-01); font-size: var(--_fonts---size--button-01);
    line-height: var(--_fonts---line-height--button-01); letter-spacing: var(--_fonts---letter-spacing--button-01);
    text-transform: uppercase; color: var(--white-alpha-700); white-space: nowrap; transition: color 0.2s ease;
  }
  .nav__dropdown-link:hover { color: var(--hansen-red); }
  @media (max-width: 479px) {
    .nav__list-item.has-dropdown { flex-direction: column; align-items: flex-start; }
    .has-dropdown::after { display: none; }
    .nav__dropdown { position: static; min-width: 0; margin: 0.9rem 0 0; padding: 0 0 0 1.25rem; gap: 0.9rem; background: none; border: 0; opacity: 1; pointer-events: auto; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .nav__dropdown-link { font-size: 1.1rem; }
  }


  /* WhatsApp: quiet round button, label slides in on hover */
  .wa-float { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 999; display: flex; align-items: center; gap: 0.75rem; color: #fff; text-decoration: none; }
  .wa-float__label { font-family: var(--_fonts---family--button-01); font-size: var(--_fonts---size--button-01); letter-spacing: var(--_fonts---letter-spacing--button-01); text-transform: uppercase; opacity: 0; transform: translateX(0.5rem); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; }
  .wa-float__icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18); transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .wa-float__icon svg { width: 1.7rem; height: 1.7rem; fill: #fff; }
  .wa-float:hover .wa-float__label { opacity: 1; transform: none; }
  .wa-float:hover .wa-float__icon { transform: translateY(-2px) scale(1.04); box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.4); }

  /* Proyectos page grid (built from the template's image + curtain components) */
  .projects-page-wrap { display: flex; flex-direction: column; gap: 3rem; padding: 7.5rem 0 6rem; }
  .projects-page-heading { display: flex; flex-direction: column; gap: 1.5rem; }
  .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .projects-grid-item { display: flex; flex-direction: column; }
  .projects-grid-img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background-color: #0b0b0b; }
  .projects-grid-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--white-alpha-50); }
  .projects-grid-meta .b4 { color: var(--hansen-red); }
  @media (max-width: 991px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 479px) { .projects-grid { grid-template-columns: 1fr; } .projects-page-wrap { padding: 5rem 0 4rem; } }

/* ---- Tipografía: ajustes para Newsreader ---- */
:root, body { --_fonts---family--serif: "Newsreader", Georgia, serif; --_fonts---family--glare: "Newsreader Glare", Georgia, serif; }
.h1, .h2, .h3, .h4, .h5 { font-optical-sizing: auto; }
.hero-title.is-long { font-size: 8rem; }
@media (max-width: 767px) { .page-sub .hero-title.is-long { font-size: 3.6rem; } }
@media (max-width: 479px) { .page-sub .hero-title.is-long { font-size: 2rem; } }

/* ---- Menú: idiomas ---- */
.nav__list { grid-column-gap: 2rem; }
.nav__langs { display: flex; align-items: center; gap: 0.6rem; margin-left: 0.5rem; padding-left: 1.5rem; border-left: 1px solid var(--white-alpha-50); }
.nav__lang { font-family: var(--_fonts---family--button-01); font-size: var(--_fonts---size--button-01); letter-spacing: var(--_fonts---letter-spacing--button-01); color: var(--white-alpha-500); transition: color 0.2s ease; }
.nav__lang:hover, .nav__lang.is-current { color: #fff; }
.nav__lang.is-current { border-bottom: 1px solid var(--hansen-red); }
.nav__link[aria-current="page"] { border-bottom-color: var(--hansen-red); }
@media (max-width: 479px) {
  .nav__list { grid-row-gap: 1.5rem; }
  .nav__langs { margin: 0.5rem 0 0; padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--white-alpha-50); gap: 1.5rem; width: 100%; }
  .nav__lang { font-size: 1.25rem; }
  .nav__menu .btn.nav-btn { margin-top: 1.5rem; flex: none; }
}

/* ---- Botones de texto y listas ---- */
.btn.stroke-btn.in-text { width: auto; margin-top: 0.5rem; }
.includes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.includes-list li { padding: 0.9rem 0; border-top: 1px solid var(--white-alpha-50); }
.includes-list li:last-child { border-bottom: 1px solid var(--white-alpha-50); }
.projects-note { color: var(--white-alpha-700); max-width: 44rem; }
.reviews-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }

/* ---- Proyectos: tarjeta que abre la galería ---- */
.projects-grid-link { display: flex; flex-direction: column; color: inherit; }
.projects-grid-img img { transition: transform 0.8s ease; }
.projects-grid-link:hover .projects-grid-img img { transform: scale(1.04); }
.projects-grid-count { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; padding: 0.35rem 0.8rem; color: #fff; background: rgba(17, 17, 17, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---- Opiniones, zonas, contacto ---- */
.reviews-page, .zones-page, .contact-page, .projects-page { position: relative; background: var(--black-900); }
.reviews-grid, .zones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review-card, .zone-card { display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; border: 1px solid var(--white-alpha-50); }
.review-card:first-child { grid-column: span 2; }
.review-stars { color: var(--hansen-red); letter-spacing: 0.2em; font-size: 1.1rem; }
.review-stars-off { color: var(--white-alpha-50); }
.review-meta { display: flex; flex-direction: column; gap: 0.35rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--white-alpha-50); }
.review-meta .b4, .contact-row .b4 { color: var(--white-alpha-500); }
.zone-card .b4 { color: var(--hansen-red); }
.zone-card p { color: var(--white-alpha-700); }
.contact-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.5rem; }
.contact-row { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.75rem 0; border-top: 1px solid var(--white-alpha-50); }
.contact-row .h6 { text-transform: none; }
.contact-row a { position: relative; }
@media (max-width: 991px) { .reviews-grid, .zones-grid, .contact-rows { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) {
  .reviews-grid, .zones-grid, .contact-rows { grid-template-columns: 1fr; }
  .review-card:first-child { grid-column: auto; }
  .review-card, .zone-card { padding: 1.5rem 1.25rem; }
  .contact-row { padding: 1.25rem 0; }
  .contact-row .h6 { overflow-wrap: anywhere; }
}

/* ---- Formulario de presupuesto ---- */
.cta-direct { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin-top: 2rem; }
.cta-direct a { position: relative; }
.inputs { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.input { width: 100%; }
.input-select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath d=%22M6 9l6 6 6-6%22 stroke=%22white%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.25rem bottom 0.6rem; background-size: 1.25rem; }
.input-select option { color: #111; background: #fff; text-transform: none; }
.input-area { resize: vertical; min-height: 6rem; text-transform: none; line-height: 1.4; }
.input::placeholder { color: var(--white-alpha-700); opacity: 1; }
.form-check { display: flex; align-items: flex-start; gap: 0.75rem; text-align: left; cursor: pointer; color: var(--white-alpha-700); }
.form-check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--hansen-red); cursor: pointer; }
.form-check a, .form-bottom-text a, .cookie-banner a, .legal-body a { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.form-bottom { grid-row-gap: 1.5rem; }
.form-bottom-text .b4 { font-size: 0.85rem; line-height: 1.5; }
@media (max-width: 479px) { .cta-direct { margin-top: 1.25rem; gap: 0.75rem 1.5rem; } .form-bottom-text .b4 { font-size: 0.8rem; } }

/* ---- Mapa con consentimiento ---- */
.map-section { position: relative; z-index: 2; background: var(--black-900); padding: 6rem 0; }
.map-wrap { display: flex; flex-direction: column; gap: 3rem; height: auto; }
.map-heading { display: flex; flex-direction: column; gap: 1.5rem; }
.map-consent-wrap { position: relative; width: 100%; height: 30rem; border: 1px solid var(--white-alpha-50); background: #0b0b0b; overflow: hidden; }
.map-consent-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.35) contrast(1.05); }
.map-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem; text-align: center; background: #0b0b0b; }
.map-consent p { max-width: 34rem; color: var(--white-alpha-700); }
.map-consent .btn { width: auto; cursor: pointer; }
.map-consent a { position: relative; }
.map-consent-wrap.is-loaded .map-consent { display: none; }
@media (max-width: 479px) { .map-section { padding: 4rem 0; } .map-consent-wrap { height: 24rem; } .map-wrap { gap: 2rem; } }

/* ---- Pie ---- */
.footer-brand { display: flex; flex-direction: column; gap: 1.5rem; max-width: 26rem; }
.footer-about { color: var(--white-alpha-700); }
.footer-hours { margin-top: 0.75rem; color: var(--white-alpha-700); }
.footer-map-link { margin-top: 1rem; position: relative; }
.footer-right.in-bottom.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1.75rem; }
.footer-cookie-btn { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
@media (max-width: 479px) { .footer-right.in-bottom.footer-links { justify-content: flex-start; } .footer { padding-bottom: 4.5rem; } }

/* ---- Aviso de cookies ---- */
.cookie-banner { position: fixed; z-index: 1001; left: 1.5rem; bottom: 1.5rem; display: none; flex-direction: column; gap: 1.25rem; width: 30rem; max-width: calc(100vw - 3rem); padding: 1.5rem; color: var(--white-alpha-800); background: rgba(17, 17, 17, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--white-alpha-50); }
.cookie-banner.is-visible { display: flex; }
.cookie-banner__btns { display: flex; gap: 0.75rem; }
.cookie-btn { flex: 1; cursor: pointer; }
@media (max-width: 479px) { .cookie-banner { left: 0.75rem; right: 0.75rem; bottom: 4.25rem; width: auto; max-width: none; padding: 1.25rem; } }
@media (min-width: 480px) and (max-width: 1279px) { .cookie-banner { width: 320px; padding: 16px; gap: 12px; } .cookie-banner .b4 { font-size: 13px; line-height: 1.45; } .cookie-btn { height: 36px; font-size: 12px; } }

/* ---- Barra móvil: Llamar + WhatsApp ---- */
.mobile-bar { display: none; }
@media (max-width: 479px) {
  .mobile-bar { position: fixed; z-index: 998; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; background: #111; border-top: 1px solid var(--white-alpha-50); padding-bottom: env(safe-area-inset-bottom); }
  .mobile-bar__btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; height: 3.5rem; color: #fff; font-family: var(--_fonts---family--button-01); font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }
  .mobile-bar__btn + .mobile-bar__btn { border-left: 1px solid var(--white-alpha-50); }
  .mobile-bar__btn svg { width: 1.2rem; height: 1.2rem; fill: #fff; }
  .mobile-bar__btn.is-wa svg { fill: #25d366; }
  .wa-float { right: 1rem; bottom: 4.5rem; }
  .wa-float__icon { width: 3.25rem; height: 3.25rem; }
}

/* ---- Páginas legales y 404 ---- */
.legal-page { position: relative; background: var(--black-900); padding: 14rem 0 8rem; }
.legal-page.is-404 { min-height: 80vh; }
.legal-wrap { display: flex; flex-direction: column; gap: 3rem; max-width: 60rem; height: auto; }
.legal-body { display: flex; flex-direction: column; gap: 1.25rem; color: var(--white-alpha-800); font-family: var(--_fonts---family--b1); font-size: 1.125rem; line-height: 1.6; font-weight: 300; }
.legal-body h2 { margin: 1.75rem 0 0; font-family: var(--_fonts---family--serif); font-size: 1.75rem; line-height: 1.2; font-weight: 400; color: #fff; }
.legal-body ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.legal-body strong { font-weight: 400; color: #fff; }
.legal-body .table-scroll { overflow-x: auto; }
.legal-body table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 1rem; }
.legal-body th, .legal-body td { padding: 0.75rem; text-align: left; vertical-align: top; border: 1px solid var(--white-alpha-50); }
.legal-body th { font-weight: 400; color: #fff; }
.page-legal .header .nav-overlay { opacity: 1; }
@media (min-width: 480px) and (max-width: 1279px) { .legal-body { font-size: 15px; } .legal-body h2 { font-size: 22px; } .legal-body table { font-size: 13px; } }
@media (max-width: 479px) { .legal-page { padding: 7.5rem 0 4rem; } .legal-wrap { gap: 2rem; } .legal-body { font-size: 1rem; } .legal-body h2 { font-size: 1.4rem; } }

/* ---- Portada: velo para que el texto se lea sobre la foto ---- */
.hero .full-bg-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(8, 8, 8, 0.62), rgba(8, 8, 8, 0) 55%), linear-gradient(to bottom, rgba(8, 8, 8, 0.5), rgba(8, 8, 8, 0) 28%); }

/* ---- Ajustes tras la revisión en escritorio ---- */
.cta .full-bg-wrap.in-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(8, 8, 8, 0.72), rgba(8, 8, 8, 0.25) 60%, rgba(8, 8, 8, 0.1)); }
.footer-right { grid-template-columns: 1fr 1.2fr; grid-column-gap: 4rem; }
.contact-box .h6 { text-transform: none; font-size: 1.5rem; overflow-wrap: anywhere; }
@media (max-width: 479px) { .footer-right { grid-template-columns: 1fr; } .contact-box .h6 { font-size: 1.25rem; } .cta .full-bg-wrap.in-cta::after { background: rgba(8, 8, 8, 0.55); } }
.is-location { max-width: none; }
/* la máscara de las letras del titular no debe cortar tildes ni la virgulilla de la Ñ */
[data-hero="title"] .char-mask { padding-top: 0.16em; margin-top: -0.16em; }
.about-heading h2 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
/* con el menú móvil abierto, el botón flotante no tapa "Pedir presupuesto" */
body:has(.w-nav-button.w--open) .wa-float, body:has(.w-nav-button.w--open) .mobile-bar { display: none; }
.beliefs > .full-bg-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(8, 8, 8, 0.38); }
/* Pantalla de carga de marca: una vez por visita, 0,8 s. El logotipo asienta, la línea roja se traza y el telón sube. */
.load-splash { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #fff; animation: splashUp 0.35s cubic-bezier(0.7, 0, 0.2, 1) 0.45s forwards; }
.load-splash__logo { width: min(58vw, 260px); height: auto; opacity: 0; transform: scale(1.06); animation: splashLogo 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.load-splash i { display: block; width: min(40vw, 150px); height: 2px; background: var(--hansen-red); transform: scaleX(0); transform-origin: left; animation: splashLine 0.4s cubic-bezier(0.6, 0, 0.2, 1) 0.05s forwards; }
@keyframes splashLogo { to { opacity: 1; transform: none; } }
@keyframes splashLine { to { transform: scaleX(1); } }
@keyframes splashUp { to { transform: translateY(-100%); visibility: hidden; } }
.no-splash .load-splash { display: none; }
@media (prefers-reduced-motion: reduce) { .load-splash { display: none; } }

/* ---- Menú móvil: que quepa en pantallas cortas y no se monte sobre el logotipo (07/10/2026) ---- */
.nav__item-home { display: none; }
@media (max-width: 479px) {
  .nav__item-home { display: flex; }
  .nav__menu { padding-top: 6.25rem; padding-bottom: 1.5rem; }
  .nav__list { grid-row-gap: 1.05rem; margin-top: 0; margin-bottom: auto; }
  .nav__link { font-size: 1.45rem; }
  .nav__dropdown { margin-top: 0.7rem; gap: 0.6rem; padding-left: 0; align-items: center; width: 100%; }
  .nav__dropdown-link { font-size: 0.95rem; white-space: normal; text-align: center; }
  .nav__langs { margin-top: 0.25rem; padding-top: 1rem; justify-content: center; }
  .nav__menu .btn.nav-btn { margin-top: 1.1rem; }
}
@media (max-width: 479px) { .nav__list-item.has-dropdown { align-items: center; } }