:root {
    --bg: #0e0e0f;
    --bg-soft: #161618;
    --bg-card: #1c1c1f;
    --line: #2a2a2e;
    --text: #f4f3ef;
    --text-soft: #b3b1a9;
    --text-mute: #76746d;
    --orange: #ef9200;
    --orange-soft: #c97b00;
    --lime: #a8c93a;
    --beige: #efe9dd;
    --section-padding-y: 110px;
    --section-padding-y-cta: 140px;
  }

  @media (max-width: 900px) {
    :root {
      --section-padding-y: 40px;
      --section-padding-y-cta: 60px;
    }
  }
  @media (max-width: 600px) {
    :root {
      --section-padding-y: 24px;
      --section-padding-y-cta: 40px;
    }
  }

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

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  ::selection { background: var(--orange); color: #000; }

  /* ========== UTILITIES ========== */
  .container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
  .container-narrow { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 700px) {
    .container,
    .container-narrow {
      padding: 0 18px;
    }
  }

  .eyebrow {
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--orange);
  }

  h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    border-radius: 0;
  }
  .btn-primary {
    background: var(--orange);
    color: #0e0e0f;
  }
  .btn-primary:hover {
    background: #ffa519;
    transform: translateY(-1px);
  }
  .btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
  }
  .btn-ghost:hover {
    border-color: var(--text);
  }
  .btn .arrow {
    transition: transform 0.25s ease;
  }
  .btn:hover .arrow { transform: translateX(4px); }

  /* ========== NAV ========== */
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 22px 0;
    background: rgba(14, 14, 15, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text);
    text-decoration: none;
  }
  .logo span { color: var(--orange); font-style: italic; }
  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }
  .nav-links a {
    color: var(--text-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: color 0.2s ease;
  }
  .nav-links a:hover { color: var(--text); }
  .nav-cta {
    padding: 12px 22px;
    font-size: 13px;
  }
  @media (max-width: 768px) {
    .nav-links { display: none; }
    .logo { font-size: 18px; }
    nav .container { gap: 16px; }
    .nav-cta {
      padding: 9px 12px;
      font-size: 10px;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
  }

  /* ========== HERO ========== */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 120px 0 80px;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../img/bio3-hero-home-atardecer-mediterraneo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(14,14,15,0.55) 0%, rgba(14,14,15,0.4) 40%, rgba(14,14,15,0.95) 100%),
      linear-gradient(90deg, rgba(14,14,15,0.6) 0%, rgba(14,14,15,0.1) 100%);
  }
  .hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    align-items: end;
  }
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  }
  .hero h1 {
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 300;
    margin-top: 28px;
    margin-bottom: 32px;
  }
  .hero h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--orange);
  }
  .hero-sub {
    font-size: 19px;
    color: var(--text-soft);
    max-width: 540px;
    margin-bottom: 40px;
    line-height: 1.6;
  }
  .hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .hero-stat {
    border-left: 1px solid rgba(255,255,255,0.18);
    padding-left: 28px;
    padding-bottom: 8px;
  }
  .hero-stat .stat-num {
    font-family: 'Fraunces', serif;
    font-size: 64px;
    font-weight: 300;
    line-height: 1;
    color: var(--text);
    letter-spacing: -0.03em;
  }
  .hero-stat .stat-num em {
    font-style: italic;
    color: var(--lime);
  }
  .hero-stat .stat-label {
    margin-top: 14px;
    font-size: 14px;
    color: var(--text-soft);
    letter-spacing: 0.02em;
    line-height: 1.5;
  }

  .hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: var(--text-mute);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .hero-scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--text-mute));
    animation: scrollLine 2.4s ease-in-out infinite;
  }
  @keyframes scrollLine {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
  }

  /* ========== SECTION BASE ========== */
  section { padding: var(--section-padding-y) 0; position: relative; }
  .section-head {
    margin-bottom: 80px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: end;
  }
  @media (max-width: 900px) {
    .section-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 24px; }
  }
  @media (max-width: 600px) {
    .section-head { margin-bottom: 16px; }
  }
  .section-head h2 {
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 300;
    margin-top: 24px;
  }
  .section-head h2 em {
    font-style: italic;
    color: var(--orange);
  }
  .section-head p {
    color: var(--text-soft);
    font-size: 17px;
    max-width: 520px;
    line-height: 1.65;
  }

  /* ========== ARGUMENTO RENTABILIDAD ========== */
  .why {
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  @media (max-width: 900px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .why-grid { grid-template-columns: 1fr; }
  }
  .why-item {
    padding: 48px 32px;
    border-right: 1px solid var(--line);
    position: relative;
  }
  .why-grid .why-item:last-child { border-right: none; }
  @media (max-width: 900px) {
    .why-item:nth-child(2n) { border-right: none; }
    .why-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  }
  .why-num {
    font-family: 'Fraunces', serif;
    font-size: 56px;
    font-weight: 300;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.03em;
  }
  .why-num em { font-style: italic; color: var(--orange); }
  .why-num small { font-size: 26px; color: var(--text-soft); margin-left: 4px; }
  .why-label {
    margin-top: 18px;
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.55;
    max-width: 220px;
  }

  /* ========== PROCESO ========== */
  .process {
    background: var(--bg);
  }
  .process-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
  }
  @media (max-width: 900px) {
    .process-list { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .process-list { grid-template-columns: 1fr; }
  }
  .process-step {
    padding: 48px 32px 64px 0;
    border-right: 1px solid var(--line);
    position: relative;
  }
  .process-list .process-step:last-child { border-right: none; padding-right: 0; }
  @media (max-width: 900px) {
    .process-step:nth-child(2n) { border-right: none; }
    .process-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 48px; }
  }
  .process-num {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--orange);
    margin-bottom: 20px;
    letter-spacing: 0.06em;
  }
  .process-step h3 {
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 16px;
  }
  .process-step h3 em { font-style: italic; }
  .process-step p {
    font-size: 15px;
    color: var(--text-soft);
    line-height: 1.65;
    padding-right: 24px;
  }

  /* ========== PRODUCTOS ========== */
  .products {
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
  }
  .products-grid {
    display: grid;
    /*grid-template-columns: repeat(2, 1fr);*/
    gap: 24px;
  }
  @media (max-width: 800px) {
    .products-grid { grid-template-columns: 1fr; }
  }
  .product-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .product-card:hover {
    border-color: rgba(239, 146, 0, 0.4);
    transform: translateY(-2px);
  }
  .product-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }
  .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
  }
  .product-card:hover .product-image img {
    transform: scale(1.04);
  }
  .product-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(14,14,15,0.65) 100%);
  }
  .product-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    background: rgba(14, 14, 15, 0.6);
    backdrop-filter: blur(8px);
    color: var(--text);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .product-tag.is-featured {
    background: var(--orange);
    color: #0e0e0f;
    border-color: transparent;
  }
  .product-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  .product-body h3 {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 8px;
  }
  .product-body h3 em { font-style: italic; color: var(--orange); }
  .product-subtitle {
    font-size: 13px;
    color: var(--text-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .product-body p {
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 24px;
  }
  .product-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: auto;
  }
  .product-sizes {
    font-size: 12px;
    color: var(--text-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .product-sizes strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 4px;
  }
  .product-link {
    color: var(--text);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.25s ease;
  }
  .product-card:hover .product-link { gap: 14px; }

  /* ========== PROMESA / CTA ========== */
  .promise {
    background: var(--bg);
    padding: var(--section-padding-y-cta) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .promise::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at center, rgba(239, 146, 0, 0.08) 0%, transparent 60%);
  }
  .promise-inner {
    position: relative;
    z-index: 2;
  }
  .promise h2 {
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 300;
    max-width: 1000px;
    margin: 24px auto 32px;
  }
  .promise h2 em { font-style: italic; color: var(--orange); }
  .promise p {
    color: var(--text-soft);
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto 48px;
    line-height: 1.65;
  }

  /* ========== CONTACTO ========== */
  .contact {
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
  }
  @media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  }
  .contact-info h2 {
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 300;
    margin: 24px 0 28px;
  }
  .contact-info h2 em { font-style: italic; color: var(--orange); }
  .contact-info > p {
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 40px;
    max-width: 460px;
  }
  .contact-meta {
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-top: 1px solid var(--line);
    padding-top: 32px;
  }
  .contact-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .contact-meta-item .label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-mute);
  }
  .contact-meta-item .value {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--text);
  }
  .contact-meta-item a {
    color: var(--text);
    text-decoration: none;
  }
  .contact-meta-item a:hover { color: var(--orange); }

  .contact-form {
    background: var(--bg-card);
    border: 1px solid var(--line);
    padding: 48px;
  }
  @media (max-width: 600px) {
    .contact-form { padding: 32px 24px; }
  }
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  @media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
  }
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
  }
  .form-field label {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-mute);
  }
  .form-field input,
  .form-field select,
  .form-field textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
    color: var(--text);
    font-family: 'Inter Tight', sans-serif;
    font-size: 15px;
    transition: border-color 0.2s ease;
    border-radius: 0;
  }
  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus {
    outline: none;
    border-bottom-color: var(--orange);
  }
  .form-field select { color: var(--text); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b3b1a9' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 24px; cursor: pointer; }
  .form-field textarea { resize: vertical; min-height: 80px; }
  .form-submit {
    width: 100%;
    margin-top: 16px;
    padding: 18px;
  }

  /* ========== FOOTER ========== */
  footer {
    background: var(--bg);
    padding: 60px 0 32px;
    border-top: 1px solid var(--line);
  }
  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    color: var(--text-mute);
    font-size: 13px;
  }
  .footer-inner a {
    color: var(--text-mute);
    text-decoration: none;
    margin-left: 24px;
    transition: color 0.2s ease;
  }
  .footer-inner a:hover { color: var(--text); }

  /* ========== ENTRY ANIMATIONS ========== */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero .eyebrow { animation: fadeUp 0.7s 0.1s ease both; }
  .hero h1 { animation: fadeUp 0.9s 0.25s ease both; }
  .hero-sub { animation: fadeUp 0.9s 0.45s ease both; }
  .hero-actions { animation: fadeUp 0.9s 0.6s ease both; }
  .hero-stat { animation: fadeUp 0.9s 0.75s ease both; }

.product-specs {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 48px;
  align-items: end;
}
.product-spec {
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.product-spec strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .product-specs { grid-template-columns: 1fr; gap: 18px; }
  .product-meta { flex-direction: column; align-items: flex-start; gap: 24px; }
  .product-meta .product-link { align-self: flex-end; }
}

/* product-card clicable completa (stretched link) */
.product-card .product-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* ===========================================================
   ESTILOS DE LA FICHA — pergola-bioclimatica.php
   Migrados desde el <style> inline del fichero en sub-paso 1.4.
   =========================================================== */
  /* ===========================================================
     ESTILOS ESPECÍFICOS DE LA FICHA — pergola-bioclimatica.php
     Self-contained. Si se valida la ficha, esto migra a main.css
     con prefijo .ficha- en una pasada de refactor.
     =========================================================== */

  /* HERO FICHA */
  .ficha-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 140px 0 80px;
  }
  .ficha-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('img/bio3-hero-ficha-restaurante-atardecer.jpg');
    background-size: cover;
    background-position: center;
  }
  .ficha-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(14,14,15,0.5) 0%, rgba(14,14,15,0.2) 40%, rgba(14,14,15,0.92) 100%),
      linear-gradient(90deg, rgba(14,14,15,0.7) 0%, rgba(14,14,15,0.1) 70%);
  }
  .ficha-hero .container { position: relative; z-index: 2; width: 100%; }
  .ficha-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: end;
  }
  @media (max-width: 900px) { .ficha-hero-grid { grid-template-columns: 1fr; gap: 48px; } }

  .ficha-hero h1 {
    font-family: 'Fraunces', serif;
    font-size: clamp(44px, 6.5vw, 86px);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin-top: 24px;
    margin-bottom: 28px;
  }
  .ficha-hero h1 em {
    font-style: italic;
    color: var(--orange);
  }
  .ficha-hero-claim {
    font-size: 18px;
    color: var(--text-soft);
    max-width: 520px;
    margin-bottom: 40px;
    line-height: 1.6;
  }
  .ficha-hero-price {
    border-left: 1px solid rgba(255,255,255,0.18);
    padding-left: 32px;
    padding-bottom: 8px;
  }
  .ficha-hero-price .price-eyebrow {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 14px;
  }
  .ficha-hero-price .price-amount {
    font-family: 'Fraunces', serif;
    font-size: 72px;
    font-weight: 300;
    line-height: 1;
    color: var(--text);
    letter-spacing: -0.03em;
  }
  .ficha-hero-price .price-amount em {
    font-style: italic;
    color: var(--orange);
  }
  .ficha-hero-price .price-amount small {
    font-size: 22px;
    color: var(--text-soft);
    margin-left: 6px;
    font-style: normal;
  }
  .ficha-hero-price .price-disclaimer {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-mute);
    max-width: 280px;
    line-height: 1.5;
  }

  /* SECCIÓN "QUÉ ES" */
  .ficha-que-es {
    padding: var(--section-padding-y) 0;
    background: var(--bg);
  }
  .ficha-que-es-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 100px;
    align-items: start;
  }
  @media (max-width: 900px) { .ficha-que-es-grid { grid-template-columns: 1fr; gap: 48px; } }
  .ficha-que-es h2 {
    font-family: 'Fraunces', serif;
    font-size: clamp(36px, 4.5vw, 58px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.02em;
  }
  .ficha-que-es h2 em {
    font-style: italic;
    color: var(--orange);
  }
  .ficha-que-es-text p {
    font-size: 17px;
    color: var(--text-soft);
    line-height: 1.7;
    margin-bottom: 22px;
  }
  .ficha-que-es-text p:last-child { margin-bottom: 0; }

  /* SECCIÓN "PARA QUIÉN ES" */
  .ficha-para-quien {
    padding: var(--section-padding-y) 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .ficha-para-quien-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 60px;
  }
  @media (max-width: 800px) { .ficha-para-quien-grid { grid-template-columns: 1fr; gap: 14px; } }
  .ficha-segmento-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .ficha-segmento-card:hover { border-color: rgba(239,146,0,0.4); transform: translateY(-2px); }
  .ficha-segmento-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }
  .ficha-segmento-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s ease;
  }
  .ficha-segmento-card:hover .ficha-segmento-image img { transform: scale(1.04); }
  .ficha-segmento-body {
    padding: 32px;
  }
  .ficha-segmento-body h3 {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .ficha-segmento-body h3 em { font-style: italic; color: var(--orange); }
  .ficha-segmento-body p {
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.6;
  }

  /* SECCIÓN "CÓMO FUNCIONA" */
  .ficha-como-funciona {
    padding: var(--section-padding-y) 0;
    background: var(--bg);
  }
  .ficha-como-funciona-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 60px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 800px) { .ficha-como-funciona-list { grid-template-columns: 1fr; } }
  .ficha-modo {
    padding: 40px 32px;
    border-right: 1px solid var(--line);
  }
  .ficha-como-funciona-list .ficha-modo:last-child { border-right: none; }
  @media (max-width: 800px) {
    .ficha-modo { border-right: none; border-bottom: 1px solid var(--line); }
    .ficha-como-funciona-list .ficha-modo:last-child { border-bottom: none; }
  }
  .ficha-modo-image {
    aspect-ratio: 4/3;
    margin-bottom: 28px;
    overflow: hidden;
  }
  .ficha-modo-image img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .ficha-modo-num {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--orange);
    margin-bottom: 14px;
    letter-spacing: 0.06em;
  }
  .ficha-modo h3 {
    font-family: 'Fraunces', serif;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 12px;
    line-height: 1.1;
  }
  .ficha-modo h3 em { font-style: italic; }
  .ficha-modo p {
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.6;
  }

  /* SECCIÓN "CARACTERÍSTICAS TÉCNICAS" */
  .ficha-caracteristicas {
    padding: var(--section-padding-y) 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .ficha-caracteristicas-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: start;
  }
  @media (max-width: 900px) { .ficha-caracteristicas-grid { grid-template-columns: 1fr; gap: 48px; } }
  .ficha-caracteristicas-table {
    border-top: 1px solid var(--line);
  }
  .ficha-caracteristicas-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    gap: 32px;
  }
  @media (max-width: 600px) {
    .ficha-caracteristicas-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  }
  .ficha-caracteristicas-row .key {
    font-size: 13px;
    color: var(--text-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ficha-caracteristicas-row .val {
    font-size: 15px;
    color: var(--text);
    line-height: 1.5;
  }

  /* SECCIÓN "OPCIONALES" */
  .ficha-opcionales {
    padding: var(--section-padding-y) 0;
    background: var(--bg);
  }
  .ficha-opcionales-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 60px;
    border-top: 1px solid var(--line);
  }
  @media (max-width: 800px) { .ficha-opcionales-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 500px) { .ficha-opcionales-grid { grid-template-columns: 1fr; } }
  .ficha-opcional {
    padding: 36px 28px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .ficha-opcional h4 {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
    line-height: 1.2;
  }
  .ficha-opcional h4 em { font-style: italic; color: var(--orange); }
  .ficha-opcional p {
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.55;
  }

  /* SECCIÓN "GARANTÍA Y RESPALDO" */
  .ficha-respaldo {
    padding: var(--section-padding-y) 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .ficha-respaldo-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: center;
  }
  @media (max-width: 900px) { .ficha-respaldo-grid { grid-template-columns: 1fr; gap: 48px; } }
  .ficha-respaldo h2 {
    font-family: 'Fraunces', serif;
    font-size: clamp(36px, 4.5vw, 58px);
    font-weight: 300;
    line-height: 1.08;
  }
  .ficha-respaldo h2 em { font-style: italic; color: var(--orange); }
  .ficha-respaldo-points {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .ficha-respaldo-point {
    padding-left: 24px;
    border-left: 2px solid var(--orange);
  }
  .ficha-respaldo-point h4 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
  }
  .ficha-respaldo-point p {
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.6;
  }

  /* SECCIÓN "CÓMO SE COMPRA" */
  .ficha-compra {
    padding: var(--section-padding-y) 0;
    background: var(--bg);
  }
  .ficha-compra-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 60px;
    border-top: 1px solid var(--line);
  }
  @media (max-width: 900px) { .ficha-compra-steps { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 500px) { .ficha-compra-steps { grid-template-columns: 1fr; } }
  .ficha-compra-step {
    padding: 40px 28px 56px 0;
    border-right: 1px solid var(--line);
  }
  .ficha-compra-steps .ficha-compra-step:last-child { border-right: none; padding-right: 0; }
  .ficha-compra-step-num {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--orange);
    margin-bottom: 16px;
  }
  .ficha-compra-step h3 {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 12px;
    line-height: 1.15;
  }
  .ficha-compra-step h3 em { font-style: italic; }
  .ficha-compra-step p {
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.6;
    padding-right: 16px;
  }

  /* CTA grande antes del configurador */
  .ficha-cta {
    padding: var(--section-padding-y-cta) 0;
    text-align: center;
    background: var(--bg);
    position: relative;
    overflow: hidden;
  }
  .ficha-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(239,146,0,0.08) 0%, transparent 60%);
  }
  .ficha-cta-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 0 32px; }
  .ficha-cta h2 {
    font-family: 'Fraunces', serif;
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 300;
    line-height: 1.05;
    margin: 20px 0 28px;
  }
  .ficha-cta h2 em { font-style: italic; color: var(--orange); }
  .ficha-cta p {
    color: var(--text-soft);
    font-size: 16px;
    margin-bottom: 40px;
    line-height: 1.6;
  }

  /* CONFIGURADOR placeholder */
  .ficha-configurador {
    padding: var(--section-padding-y-cta) 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    text-align: center;
  }
  .ficha-configurador h2 {
    font-family: 'Fraunces', serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 300;
    margin: 20px 0 24px;
    line-height: 1.05;
  }
  .ficha-configurador h2 em { font-style: italic; color: var(--orange); }
  .ficha-configurador-placeholder {
    max-width: 600px;
    margin: 40px auto 0;
    padding: 60px 40px;
    border: 1px dashed var(--line);
    color: var(--text-mute);
    font-size: 14px;
  }

  /* Márgenes internos de la ficha — responsive */
  @media (max-width: 900px) {
    .ficha-para-quien-grid,
    .ficha-como-funciona-list,
    .ficha-opcionales-grid,
    .ficha-compra-steps {
      margin-top: 20px;
    }
  }
  @media (max-width: 600px) {
    .ficha-para-quien-grid,
    .ficha-como-funciona-list,
    .ficha-opcionales-grid,
    .ficha-compra-steps {
      margin-top: 14px;
    }
  }

  /* En móvil, los cambios de fondo ya separan suficientemente. Quitamos borders redundantes. */
  @media (max-width: 600px) {
    .ficha-para-quien,
    .ficha-caracteristicas,
    .ficha-respaldo,
    .ficha-configurador {
      border-top: none;
      border-bottom: none;
    }
  }
  @media (max-width: 600px) {
    .why,
    .products,
    .contact {
      border-top: none;
      border-bottom: none;
    }
  }

/* ===========================================================
   ESTILOS DE LA PÁGINA grupo-disena.php
   =========================================================== */

.grupo-hero {
  padding: 140px 0 60px;
  background: var(--bg);
}
.grupo-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(44px, 6vw, 78px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 20px;
  margin-bottom: 24px;
}
.grupo-hero h1 em {
  font-style: italic;
  color: var(--orange);
}
.grupo-hero-claim {
  font-size: 18px;
  color: var(--text-soft);
  max-width: 580px;
  line-height: 1.6;
}

.grupo-seccion {
  padding: var(--section-padding-y) 0;
  background: var(--bg);
}
.grupo-seccion-alt {
  background: var(--bg-soft);
}
.grupo-seccion h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-top: 20px;
  margin-bottom: 40px;
}
.grupo-seccion h2 em {
  font-style: italic;
  color: var(--orange);
}
.grupo-placeholder {
  padding: 60px 40px;
  border: 1px dashed var(--line);
  color: var(--text-mute);
  font-size: 14px;
  max-width: 720px;
}
@media (max-width: 600px) {
  .grupo-placeholder { padding: 32px 20px; }
  .grupo-seccion h2 { margin-bottom: 24px; }
}

/* ===========================================================
   MENCIONES AL GRUPO DISEÑA EN EL HOME
   =========================================================== */

.grupo-mencion {
  background: var(--bg);
  padding: 28px 0;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.grupo-mencion-banda {
  background: var(--bg-soft);
  border-top: none;
}
.grupo-mencion-cierre {
  background: var(--bg);
  border-bottom: none;
}
.grupo-mencion p {
  color: var(--text-soft);
  font-size: 14px;
  letter-spacing: 0.02em;
  margin: 0;
}
.grupo-mencion-link {
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.25s ease;
}
.grupo-mencion-link:hover { gap: 14px; color: var(--orange); }
.grupo-mencion-link .arrow { transition: transform 0.25s ease; }
.grupo-mencion-link:hover .arrow { transform: translateX(2px); }

@media (max-width: 600px) {
  .grupo-mencion { padding: 20px 0; }
  .grupo-mencion p { font-size: 13px; }
  .grupo-mencion-link { font-size: 12px; }
}

/* Nuevas reglas para grupo-disena.php — contenido real */

.grupo-texto {
  max-width: 760px;
}
.grupo-texto p {
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 22px;
}
.grupo-texto p:last-child { margin-bottom: 0; }
.grupo-texto strong {
  color: var(--text);
  font-weight: 500;
}

.grupo-intro {
  max-width: 720px;
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 48px;
}
.grupo-pie {
  max-width: 760px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.7;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.grupo-pie strong { color: var(--text); font-weight: 500; }

/* Grid de marcas del grupo */
.marcas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 700px) {
  .marcas-grid { grid-template-columns: 1fr; }
}
.marca-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 48px 40px;
  transition: border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}
.marca-card:hover { border-color: rgba(239,146,0,0.4); }
.marca-logo {
  height: 80px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
}
.marca-logo img {
  max-height: 100%;
  max-width: 180px;
  width: auto;
  object-fit: contain;
}
.marca-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 10px;
}
.marca-card p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.6;
}

/* Grid de sedes */
.sedes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) {
  .sedes-grid { grid-template-columns: 1fr; }
}
.sede-card {
  padding: 36px 32px;
  border-right: 1px solid var(--line);
}
.sedes-grid .sede-card:last-child { border-right: none; }
@media (max-width: 800px) {
  .sede-card { border-right: none; border-bottom: 1px solid var(--line); }
  .sedes-grid .sede-card:last-child { border-bottom: none; }
}
.sede-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 16px;
  line-height: 1.15;
}
.sede-card h3 em {
  font-style: italic;
  color: var(--text-mute);
  font-size: 16px;
  display: block;
  margin-top: 2px;
}
.sede-card p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.6;
}

/* Grid de certificaciones */
.certificaciones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 800px) {
  .certificaciones-grid { grid-template-columns: 1fr; }
}
.cert-card {
  padding: 28px 24px;
  background: var(--bg);
  border-left: 2px solid var(--orange);
  border-top: none;
}
.cert-card h4 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.cert-card h4 em {
  font-style: italic;
  color: var(--text-mute);
  font-weight: 400;
}
.cert-card p {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.6;
}

/* Sección cierre emocional */
.grupo-cierre {
  padding: var(--section-padding-y-cta) 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.grupo-cierre::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(239,146,0,0.06) 0%, transparent 60%);
}
.grupo-cierre .container { position: relative; z-index: 2; }
.grupo-cierre h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 300;
  line-height: 1.08;
  margin-top: 20px;
  margin-bottom: 40px;
}
.grupo-cierre h2 em {
  font-style: italic;
  color: var(--orange);
}
.grupo-bienvenida {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-style: italic;
  color: var(--text);
  margin-top: 32px !important;
}
.grupo-cta-bloque {
  margin-top: 60px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  max-width: 760px;
}
.grupo-cta-bloque p {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 32px;
}

/* Logo del grupo en el hero de grupo-disena.php */
.grupo-hero-logo {
  margin-bottom: 32px;
}
.grupo-hero-logo img {
  max-height: 70px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 600px) {
  .grupo-hero-logo img { max-height: 50px; }
  .grupo-hero-logo { margin-bottom: 20px; }
}

/* ===========================================================
   CONFIGURADOR (PoC visual — sub-paso 1+2 FASE 4)
   =========================================================== */

[x-cloak] { display: none !important; }

.conf-root { margin-top: 40px; }

/* Pantalla inicial: pregunta de suelo */
.conf-init {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 64px 40px;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.conf-init .eyebrow { justify-content: center; }
.conf-init h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 18px 0 14px;
}
.conf-init h3 em { font-style: italic; color: var(--orange); }
.conf-init p {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 36px;
}
.conf-init-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Contenedor del configurador */
.conf-container {
  display: grid;
  grid-template-columns: 58fr 42fr;
  grid-template-areas: "media stack";
  gap: 16px 24px;
  align-items: start;
}
/* Columna izquierda (D-CONF-12): foto + simulador + CTA apilados. */
.conf-container > .conf-media { grid-area: media; display: flex; flex-direction: column; gap: 16px; }
/* Columna derecha agrupada (ítems 2-3): suelo + opciones + cuota empaquetados arriba con poco aire,
   para que la cuota suba; así la altura de la foto NO infla las filas del grid (que dejaba huecos). */
.conf-container > .conf-stack { grid-area: stack; display: flex; flex-direction: column; gap: 12px; }

/* Stage de foto */
.conf-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-soft);
  overflow: hidden;
  border: 1px solid var(--line);
}
.conf-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}
.conf-stage img.is-active { opacity: 1; z-index: 1; }

/* Panel de controles: columna derecha en desktop (Largo y Ancho en una fila, el resto a ancho completo). */
.conf-controls {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px 18px;
}

.conf-control { display: flex; flex-direction: column; gap: 10px; }
/* Ítem 3 (PC): Largo + Ancho en fila de 2 (span 3 c/u); LED + Cortina + Color en UNA fila de 3 (span 2 c/u). */
.conf-control:nth-child(1), .conf-control:nth-child(2) { grid-column: span 3; }
.conf-control:nth-child(3), .conf-control:nth-child(4), .conf-control:nth-child(5) { grid-column: span 2; }
.conf-control > label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Inputs y helpers de medidas (Largo / Ancho) — usados por .conf-control en la sección de medidas. */
.conf-control input[type="text"] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  padding: 6px 0;
  outline: none;
}
.conf-control input[type="text"]:focus { border-bottom-color: var(--orange); }
.conf-control input.is-invalid { border-bottom-color: #e54a4a; color: #e54a4a; }
.conf-helper {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  margin-top: 4px;
}
.conf-toggle:disabled,
.conf-color:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* TODO (2026-05-28): CSS huérfano tras refactor a inputs separados (Largo y Ancho cada uno en su propio .conf-control). Limpiar en pasada de limpieza CSS posterior. */
/* Medidas */
.conf-medidas {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-mute);
}
.conf-medidas input {
  width: 70px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  padding: 6px 0;
  outline: none;
}
.conf-medidas input:focus { border-bottom-color: var(--orange); }
.conf-medidas-sep { font-size: 14px; color: var(--text-mute); }

/* Toggles */
.conf-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  padding: 10px 14px;
  font-family: 'Inter Tight', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.2s ease;
}
.conf-toggle:hover { border-color: rgba(255, 255, 255, 0.32); }
.conf-toggle-track {
  display: inline-block;
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  position: relative;
  transition: background 0.25s ease;
  flex-shrink: 0;
}
.conf-toggle-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.25s ease;
}
.conf-toggle.is-on .conf-toggle-track { background: var(--orange); }
.conf-toggle.is-on .conf-toggle-thumb { left: 18px; }
.conf-toggle-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Colors */
.conf-colors { display: flex; gap: 10px; }
.conf-color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  padding: 2px;
  transition: border-color 0.2s ease;
}
.conf-color::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.conf-color-antracita::after { background: #2a2a2e; border: 1px solid rgba(255, 255, 255, 0.18); }
.conf-color-blanco::after { background: #f4f3ef; }
.conf-color.is-selected { border-color: var(--orange); }

.conf-disclaimer {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0;
  grid-column: 1 / -1;
  text-align: right;
}
/* Ítem 4: "Imagen ilustrativa" superpuesta y discreta en la esquina inferior de la foto (libera una línea). */
.conf-stage .conf-disclaimer {
  position: absolute;
  bottom: 8px;
  right: 10px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(14, 14, 15, 0.5);
  padding: 3px 8px;
  pointer-events: none;
}

/* Panel de cuota: bloque destacado en la columna derecha (desktop) / sticky bottom bar (móvil). */
.conf-cuota {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.conf-cuota .eyebrow { justify-content: flex-start; }
.conf-cuota-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--orange);
}
.conf-cuota.is-empty .conf-cuota-num { color: var(--text-mute); }
/* Ítem 2: la cuota mensual va DEBAJO del €/día, en tamaño pequeño. Sin texto explicativo. */
.conf-cuota-mes { font-size: 16px; color: var(--text); letter-spacing: 0.01em; margin-top: -8px; }
.conf-cuota.is-empty .conf-cuota-mes { color: var(--text-mute); }
/* Hint contextual que sustituye al número de cuota mientras faltan datos (medidas/provincia).
   Aviso-guía CALMADO: texto legible sobre un tinte de marca muy suave (--orange ~10%) con un
   filo de acento sutil a la izquierda. No es un error → sin naranja sólido ni borde de alerta. */
.conf-cuota-hint {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(239, 146, 0, 0.10);          /* --orange (#ef9200) a ~10% */
  border-left: 3px solid rgba(239, 146, 0, 0.55);
  padding: 12px 14px;
  border-radius: 6px;
  margin: 0;
  max-width: 38ch;
}

.conf-plazo { display: flex; flex-direction: column; gap: 8px; }
.conf-plazo-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.conf-plazo-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.conf-plazo-options button {
  flex: 1 1 0;
  min-width: 56px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  padding: 10px 6px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.conf-plazo-options button:hover { border-color: rgba(255, 255, 255, 0.32); }
.conf-plazo-options button.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: #0e0e0f;
}

.conf-avisos { display: flex; flex-direction: column; gap: 4px; }
.conf-avisos p {
  margin: 0;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
.conf-avisos .conf-aviso-pendiente { color: var(--orange); }

/* Simulador de rentabilidad (D-CONF-12) — vive en la columna izquierda, bajo la foto. */
.conf-simulador {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.conf-simulador h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.15;
  margin: 2px 0 0;
}
.conf-simulador h3 em { font-style: italic; color: var(--orange); }
.conf-sim-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px 16px;
}
.conf-sim-field { display: flex; flex-direction: column; gap: 6px; }
.conf-sim-field label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.conf-sim-field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  padding: 6px 0;
  outline: none;
}
.conf-sim-field input:focus { border-bottom-color: var(--orange); }
.conf-sim-help { font-size: 10px; letter-spacing: 0.02em; color: var(--text-mute); line-height: 1.4; }

.conf-sim-slider { display: flex; flex-direction: column; gap: 8px; }
.conf-sim-slider label { font-size: 12px; color: var(--text-soft); }
.conf-sim-slider label strong { color: var(--text); }
.conf-sim-slider input[type="range"] { width: 100%; cursor: pointer; accent-color: var(--text-mute); }
.conf-sim-slider input[type="range"].is-positive { accent-color: #4caf50; }
.conf-sim-slider input[type="range"].is-negative { accent-color: #e54a4a; }

.conf-sim-gate { font-size: 13px; color: var(--text-mute); margin: 0; line-height: 1.5; }

.conf-sim-output {
  border: 1px solid var(--line);
  padding: 14px 16px;
}
.conf-sim-output.is-positive { border-color: rgba(76, 175, 80, 0.5); background: rgba(76, 175, 80, 0.08); }
.conf-sim-output.is-negative { border-color: rgba(229, 74, 74, 0.45); background: rgba(229, 74, 74, 0.08); }
.conf-sim-result-grid { display: flex; flex-direction: column; gap: 6px; }
.conf-sim-equilibrio { font-size: 13px; color: var(--text-soft); }
.conf-sim-equilibrio strong { color: var(--text); }
.conf-sim-resultado { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 300; line-height: 1.1; }
.conf-sim-output.is-positive .conf-sim-resultado { color: #6fcf73; }
.conf-sim-output.is-negative .conf-sim-resultado { color: #e54a4a; }

.conf-sim-disclaimer { font-size: 11px; line-height: 1.5; color: var(--text-mute); margin: 0; }

/* CTA "Contratar proyecto" (D-CONF-12) — al pie del stack izquierdo. */
.conf-cta-btn {
  display: block;
  width: 100%;
  background: var(--orange);
  border: 1px solid var(--orange);
  color: #0e0e0f;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 24px;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.conf-cta-btn:hover:not(:disabled) { background: #ff9e1a; }
.conf-cta-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Disparador del simulador (D-CONF-12) — SOLO móvil. En desktop el simulador ya está inline → oculto. */
.conf-sim-trigger { display: none; }

/* Modal del simulador (D-CONF-12) — solo se abre en móvil. Reutiliza .conf-modal; la card crece y scrollea. */
.conf-sim-modal-card {
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.conf-sim-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-soft);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.conf-sim-modal-close:hover { color: var(--text); }
.conf-sim-modal-cuota { display: flex; flex-direction: column; gap: 12px; }
.conf-sim-modal-cuota .eyebrow { justify-content: flex-start; }
.conf-sim-modal-cuota.is-empty .conf-cuota-num { color: var(--text-mute); }
/* Dentro de la card el simulador no necesita su propia caja (evita doble borde/fondo). */
.conf-simulador-modal { background: transparent; border: none; padding: 0; }

/* --- Modal de reserva (FASE 5/6, test): formulario + aceptación. Reutiliza .conf-sim-modal-card. --- */
.conf-reserva-cuota {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.conf-reserva-cuota > div { display: flex; flex-direction: column; gap: 2px; }
.conf-reserva-cuota span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.conf-reserva-cuota strong { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 300; color: var(--orange); }
.conf-reserva-disc { font-size: 11px; line-height: 1.5; color: var(--text-mute); margin: 0; }

.conf-reserva-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.conf-reserva-field { display: flex; flex-direction: column; gap: 6px; }
.conf-reserva-wide { grid-column: 1 / -1; }
.conf-reserva-field > span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.conf-reserva-field input,
.conf-reserva-field select {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text); font-family: 'Inter Tight', sans-serif; font-size: 15px;
  padding: 6px 0; outline: none;
}
/* opciones legibles en el desplegable nativo (fondo claro del SO) */
.conf-reserva-field option, .conf-reserva-field optgroup { color: #111; }
.conf-reserva-field input:focus,
.conf-reserva-field select:focus { border-bottom-color: var(--orange); }
.conf-reserva-field input.is-invalid { border-bottom-color: #e54a4a; color: #e54a4a; }

.conf-reserva-checks { display: flex; flex-direction: column; gap: 10px; }
.conf-reserva-checks label {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.45; color: var(--text-soft); cursor: pointer;
}
.conf-reserva-checks input[type="checkbox"] { margin-top: 2px; accent-color: var(--orange); flex: 0 0 auto; }
.conf-reserva-checks a { color: var(--orange); }

/* A3: los 4 avisos como texto visible encima de los 2 checks */
.conf-reserva-avisos { font-size: 13px; color: var(--text-soft); }
.conf-reserva-avisos-tit { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.conf-reserva-avisos ul { margin: 0; padding-left: 18px; line-height: 1.55; }

/* A4: feedback de validación (inline por campo + resumen) */
.conf-reserva-err { display: block; font-size: 12px; color: #e54a4a; margin-top: 4px; }
.conf-reserva-resumen-err {
  margin: 14px 0 0; padding: 12px 14px; list-style: none;
  border: 1px solid rgba(229, 74, 74, 0.45); background: rgba(229, 74, 74, 0.08);
}
.conf-reserva-resumen-err li { font-size: 13px; color: #e54a4a; line-height: 1.5; }
.conf-reserva-resumen-err li::before { content: "• "; }

/* A5: aviso de suelo público dentro del modal (destacado, no bloqueante) */
.conf-reserva-aviso-publico {
  border: 1px solid rgba(255, 140, 0, 0.5); background: rgba(255, 140, 0, 0.10);
  color: var(--text-soft); font-size: 13px; line-height: 1.5; padding: 12px 14px;
}
.conf-reserva-aviso-publico strong { color: var(--orange); }

/* C: post-pago — contacto (principal) + referido/home (secundarios, pequeños) */
.postpago-contacto { border: 1px solid var(--line); padding: 16px 18px; margin: 18px 0; }
.postpago-contacto-datos { display: flex; gap: 22px; flex-wrap: wrap; margin: 8px 0 0; font-size: 18px; }
.postpago-contacto-datos a { color: var(--orange); text-decoration: none; font-weight: 600; }
.postpago-secundario { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.postpago-referido-txt { font-size: 13px; color: var(--text-mute); margin: 0 0 8px; }
.postpago-referido-btns { display: flex; gap: 16px; flex-wrap: wrap; margin: 0; }
.postpago-referido-btns a { font-size: 13px; color: var(--text-soft); text-decoration: underline; }
.postpago-home { margin: 14px 0 0; }
.postpago-home a { font-size: 12px; color: var(--text-mute); }

/* --- Páginas pago-simulado.php / reserva-resultado.php --- */
.pago-sim-banner {
  background: #e54a4a; color: #fff; text-align: center; font-weight: 600;
  letter-spacing: 0.04em; padding: 12px 16px; margin-bottom: 20px;
}
.pago-sim-card { background: var(--bg-card); border: 1px solid var(--line); padding: 32px; max-width: 620px; margin: 0 auto; }
.pago-sim-ref { color: var(--text-mute); font-size: 13px; margin: 0 0 18px; }
.pago-sim-importe {
  display: flex; justify-content: space-between; align-items: baseline;
  border: 1px solid var(--line); padding: 14px 18px; margin-bottom: 6px;
}
.pago-sim-importe span { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.pago-sim-importe strong { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 300; color: var(--orange); }
.pago-sim-nota { font-size: 11px; line-height: 1.5; color: var(--text-mute); margin: 6px 0 0; }
.pago-sim-h3 { font-family: 'Fraunces', serif; font-weight: 300; font-size: 18px; margin: 24px 0 8px; }
.pago-sim-incluye { font-size: 14px; color: var(--text-soft); margin: 0; }
.pago-sim-resumen { margin: 4px 0; }
/* el resumen trae estilos inline pensados para el correo (fondo claro); aquí forzamos color legible sobre la card oscura */
.pago-sim-resumen table, .pago-sim-resumen td { color: var(--text-soft) !important; }
.pago-sim-botones { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.pago-sim-btn-ghost {
  width: 100%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text); font-family: 'Inter Tight', sans-serif; font-size: 13px;
  letter-spacing: 0.06em; padding: 13px 16px; cursor: pointer;
}
.pago-sim-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.4); }
.pago-sim-volver { margin: 18px 0 0; }
.pago-sim-volver a { color: var(--orange); font-size: 13px; }
.pago-sim-ok-reenv { color: #6fcf73; font-size: 14px; margin: 4px 0 0; }

/* Modal suelo público */
.conf-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(14, 14, 15, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.conf-modal-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 48px 40px;
  max-width: 520px;
  text-align: left;
}
.conf-modal-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.15;
  margin: 14px 0 16px;
}
.conf-modal-card p {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 32px;
}

/* Cortina de cristal — modal por lados y resumen bajo el toggle (D-CONF-11) */
.conf-modal-cortina .conf-modal-card { max-width: 480px; }
.conf-modal-cortina h3 {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.15;
  margin: 12px 0 8px;
}
.conf-modal-cortina p {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 24px;
}
.conf-lados-group { margin-bottom: 20px; }
.conf-lados-group:last-of-type { margin-bottom: 32px; }
.conf-lados-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.conf-lados-options { display: flex; gap: 8px; }
.conf-lados-options button {
  flex: 1 1 0;
  min-width: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  padding: 12px 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.conf-lados-options button:hover { border-color: rgba(255, 255, 255, 0.32); }
.conf-lados-options button.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: #0e0e0f;
}

.conf-cortina-resumen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 6px;
}
.conf-cortina-link {
  background: none;
  border: none;
  color: var(--orange);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}
.conf-cortina-link:hover { text-decoration: underline; }

/* PC: resumen de la cortina activa en COLUMNA (texto en una línea + "Configurar" debajo), como en móvil.
   En la fila LED/Cortina/Color la celda es estrecha (1/3); en fila (space-between) el texto compartía
   ancho con "Configurar" y se partía feo ("2 / largos / ·"). En columna el texto dispone de todo el ancho
   de la celda → cabe en una línea. min-width:0 en la celda evita que, si el resumen fuese algo más ancho,
   ensanche su columna y rompa la fila LED/Cortina/Color. Solo desktop; móvil ya estaba bien. */
@media (min-width: 801px) {
  .conf-control:nth-child(4) { min-width: 0; }
  .conf-cortina-resumen { flex-direction: column; align-items: flex-start; gap: 4px; }
  .conf-cortina-resumen > span { white-space: nowrap; }
}

/* Responsive: en movil el container vuelve a stack, la foto sticky arriba y los controles scrollean debajo. Largo y Ancho siguen en una fila gracias al grid interno de .conf-controls. */
@media (max-width: 800px) {
  .conf-container { display: block; grid-template-areas: none; }
  /* D-CONF-12 — móvil APLAZADO: el wrapper se vuelve transparente (display:contents) para que la foto
     conserve su sticky (top:72px) tal cual; simulador y CTA se ocultan. Móvil idéntico al estado previo. */
  .conf-container > .conf-media { display: contents; }
  /* el stack de la derecha vuelve a flujo normal en móvil: deja el espaciado como estaba (márgenes propios). */
  .conf-container > .conf-stack { display: block; }
  .conf-simulador,
  .conf-cta-btn { display: none; }
  .conf-stage {
    position: sticky;
    top: 72px;             /* altura efectiva del nav fixed en móvil (padding 22+22 + CTA ~28 + border 1). Con top:0 la foto se enganchaba al borde absoluto del viewport y los primeros 72px quedaban tapados por el nav semi-transparente al scrollear; con top:72 queda fija justo bajo el nav sin solape ni "margen de subida" visible. */
    z-index: 5;
    aspect-ratio: 3 / 2;   /* coincide con la proporción nativa de las fotos (1200×800) → se ven enteras sin recorte */
    height: auto;
  }
  .conf-controls {
    gap: 18px;
    padding: 20px;
    margin-top: 12px;
    grid-template-columns: 1fr 1fr;   /* móvil: 2 columnas (desktop usa 6 — ítem 3). Móvil se deja como estaba. */
  }
  /* deshacer el span de desktop para que Largo/Ancho vuelvan al flujo de 2 columnas del móvil */
  .conf-control:nth-child(1), .conf-control:nth-child(2) { grid-column: auto; }
  .conf-disclaimer { text-align: left; grid-row: 4; }   /* bajo la rejilla LED/Color/Cortina del Ajuste 2 */

  /* Ajuste 2 (solo móvil): LED y color se apilan en la columna izquierda y la cortina (con su
     resumen) ocupa la derecha abarcando ambas filas. Así el color cae en el hueco que LED dejaba
     vacío y se elimina su fila propia → se gana una línea vertical. CSS puro: no se toca el markup,
     por lo que el :disabled del color y el swap de foto se conservan. Desktop intacto. */
  .conf-control:nth-child(3) { grid-column: 1; grid-row: 2; }       /* LED — arriba izquierda */
  .conf-control:nth-child(5) { grid-column: 1; grid-row: 3; }       /* Color estructura — bajo LED */
  .conf-control:nth-child(4) { grid-column: 2; grid-row: 2 / 4; }   /* Cortina + resumen — columna derecha */
  /* Resumen bajo el toggle de cortina: en columna estrecha, apilar texto + link para evitar overflow horizontal. */
  .conf-cortina-resumen { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Cuota como sticky bottom bar: siempre visible al scrollear los controles. */
  .conf-cuota {
    position: sticky;
    bottom: 0;
    z-index: 50;
    margin-top: 12px;
    padding: 14px 18px;
    gap: 10px;
  }
  .conf-cuota .eyebrow { display: none; }
  .conf-cuota-num { font-size: 28px; line-height: 1.1; }
  .conf-plazo-label { display: none; }
  .conf-plazo-options { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  /* Ajuste 1 (solo móvil): se oculta el plazo de 12m para que los 5 restantes entren en una línea.
     :first-of-type apunta al 1er <button> (el de 12m); ignora el <template x-for> de Alpine, que es el
     primer nodo hijo de .conf-plazo-options. flex:1 1 0 reparte los 5 sin hueco ni scroll. Estado intacto: default 36. */
  .conf-plazo-options button { flex: 1 1 0; min-width: 0; }
  .conf-plazo-options button:first-of-type { display: none; }
  .conf-avisos p { font-size: 11px; }

  /* D-CONF-12 móvil: disparador del simulador, anclado al pie de la cuota sticky (no solapa: va en el flujo
     interno de .conf-cuota, debajo de los avisos). Estilo secundario (outline) para no competir con la cuota. */
  .conf-sim-trigger {
    display: block;
    width: 100%;
    margin-top: 2px;
    background: transparent;
    border: 1px solid var(--orange);
    color: var(--orange);
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 11px 16px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  }
  .conf-sim-trigger:hover:not(:disabled) { background: var(--orange); color: #0e0e0f; }
  .conf-sim-trigger:disabled { opacity: 0.4; cursor: not-allowed; }

  /* La regla de arriba oculta el simulador y el CTA INLINE en móvil; dentro del modal hay que re-mostrarlos
     (reutilizan .conf-simulador / .conf-cta-btn). Mayor especificidad → override sin tocar la regla original. */
  .conf-modal-sim .conf-simulador { display: flex; }
  .conf-modal-sim .conf-cta-btn { display: block; }
  /* Igual para el modal de reserva: la regla de arriba oculta .conf-cta-btn en móvil; el botón Pagar va dentro del modal. */
  .conf-modal-reserva .conf-cta-btn { display: block; }
  .conf-modal-reserva .conf-reserva-form { grid-template-columns: 1fr; }

  /* Inputs del simulador apilados dentro del modal (la rejilla 3-col no entra en columna estrecha). */
  .conf-modal-sim .conf-sim-inputs { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 600px) {
  .conf-init { padding: 40px 24px; }
  .conf-modal-card { padding: 32px 24px; }
  .conf-controls { padding: 16px; gap: 14px; }
  .conf-cuota { padding: 12px 16px; gap: 8px; }
  .conf-cuota-num { font-size: 24px; }
  .conf-modal-cortina h3 { font-size: 20px; }
  .conf-lados-options button { padding: 10px 0; font-size: 15px; }
}

/* ===== Páginas legales (aviso-legal / privacidad / condiciones-compra) =====
   TODO scopeado bajo .legal para NO pisar .eyebrow / h1 / h2 de marketing.
   Sustituye al <style> embebido que tenían (paleta/fuentes propias) → ahora usan el tema del sitio. */
.legal { max-width: 820px; margin: 0 auto; padding: 56px 24px 80px; }
.legal .eyebrow {
  display: flex; align-items: center; gap: 14px; justify-content: flex-start;
  color: var(--orange); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px;
}
.legal .eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--orange); }
.legal h1 {
  font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--text);
}
.legal .updated { color: var(--text-mute); font-size: 13px; margin: 0 0 40px; }
.legal h2 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 21px; margin: 36px 0 10px; color: var(--text); }
.legal p, .legal li { color: var(--text-soft); line-height: 1.7; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--orange); }
.legal .ph { color: var(--orange); font-weight: 600; }
.legal .note, .legal .key {
  background: var(--bg-card); border: 1px solid var(--line); border-left: 3px solid var(--orange);
  padding: 16px 20px; margin: 20px 0;
}
.legal .note { color: var(--text-mute); font-size: 14px; }
.legal .key strong { color: var(--text); }
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.legal th, .legal td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.legal th { background: var(--bg-card); color: var(--text); font-weight: 600; }
.legal code { font-family: monospace; font-size: 0.92em; color: var(--text); }

/* ===== Ítem 5: switch de tipo de suelo (cambio en caliente dentro del configurador) ===== */
/* Franja de ubicación: tipo de suelo + provincia de instalación, lado a lado (envuelven si no caben). */
.conf-ubicacion { display: flex; gap: 16px 24px; flex-wrap: wrap; align-items: flex-end; }
.conf-suelo-switch { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.conf-provincia { display: flex; flex-direction: column; gap: 8px; flex: 1 1 220px; min-width: 200px; }
.conf-provincia-select {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  padding: 9px 10px;
  cursor: pointer;
}
.conf-provincia-select:focus { border-color: var(--orange); outline: none; }
.conf-provincia-select option { color: #111; }   /* legible en el desplegable nativo (fondo claro del SO) */
.conf-suelo-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); }
.conf-suelo-options { display: inline-flex; border: 1px solid var(--line); }
.conf-suelo-options button {
  background: transparent; border: none; color: var(--text);
  font-family: 'Inter Tight', sans-serif; font-size: 13px; letter-spacing: 0.04em;
  padding: 8px 16px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.conf-suelo-options button + button { border-left: 1px solid var(--line); }
.conf-suelo-options button:hover { border-color: rgba(255, 255, 255, 0.32); }
.conf-suelo-options button.is-active { background: var(--orange); color: #0e0e0f; }

/* ===== Ítem 11: subir a BLANCO los textos pequeños del configurador (legibilidad).
   Mantiene los tamaños; solo color. Scopeado a .conf-* (no afecta a marketing/legales). ===== */
.conf-control > label,
.conf-helper,
.conf-disclaimer,
.conf-plazo-label,
.conf-avisos p,
.conf-sim-field label,
.conf-sim-help,
.conf-sim-gate,
.conf-sim-disclaimer { color: var(--text); }

/* ===== Ítem 1 (SOLO PC/portátil ≥801px): subir el título/sección del configurador para que la cuota
   entre sin scroll. Recorta el aire superior (era var --section-padding-y-cta = 140px) dejando hueco
   suficiente bajo el nav fixed (~76px). En móvil NO se toca (mantiene el padding por variable). ===== */
@media (min-width: 801px) {
  .ficha-configurador { padding-top: 88px; }
  .conf-root { margin-top: 20px; }
  .ficha-configurador h2 { margin: 12px 0 16px; }
}

/* Scroll del modal "espacio mayor": su card es la base .conf-modal-card (sin max-height/overflow,
   como la de suelo público). Como aquí el contenido es largo, replicamos EL MISMO mecanismo que ya
   usan los modales de datos y calculador (.conf-sim-modal-card) para que scrollee y el botón sea
   alcanzable. Scopeado a .conf-modal-espacio → no afecta a los demás modales. */
.conf-modal-espacio .conf-modal-card { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* ===== Esquema CSS del modal "espacio mayor": DOS ejemplos de combinación (ilustrativos).
   Sin imagen. Proporciones reales (6:4,5 y 3:2 a la misma escala). Responsive (flex-wrap). ===== */
.esquema-titulo {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-soft); text-align: center; margin: 4px 0 14px;
}
/* Los dos ejemplos, uno al lado del otro (apilan si no caben). Gran separación ENTRE ejemplos
   (32px) frente a la pequeña separación DENTRO de cada combinación (12px) → se leen como 2 grupos. */
.esquema-ejemplos { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin: 0 0 28px; }
.esquema-pergolas {
  display: flex;
  align-items: flex-end;     /* apoyadas en una "base" común, como sobre el suelo */
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}
.esquema-pergola {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--orange);
  background: rgba(239, 146, 0, 0.10);
}
.esquema-pergola span { font-size: 11px; color: var(--text); letter-spacing: 0.02em; white-space: nowrap; }
/* escala ~26px/m → 6×4,5 = 156×117 · 3×2 = 78×52 (la pequeña, claramente menor) */
.esquema-pergola-grande  { width: 156px; height: 117px; }
.esquema-pergola-pequena { width: 78px;  height: 52px; }
.esquema-pergola-pequena span { font-size: 10px; }
/* Móvil: COMPACTAR el modal "espacio mayor" para que quepa sin scroll en un móvil estándar.
   El scroll interno (.conf-modal-espacio .conf-modal-card) SE MANTIENE como red para pantallas pequeñas.
   Todo scopeado a .conf-modal-espacio → no afecta a desktop, ni a los otros modales. */
@media (max-width: 600px) {
  /* (2) más ancho: menos margen lateral del overlay + de la card */
  .conf-modal.conf-modal-espacio { padding: 12px 10px; }
  /* (1) menos aire arriba (rótulo pegado arriba) + lados */
  .conf-modal-espacio .conf-modal-card { padding: 18px 16px; }
  /* (3) condensar texto sin apelmazar */
  .conf-modal-espacio .conf-modal-card h3 { font-size: 22px; margin: 8px 0 10px; }
  .conf-modal-espacio .conf-modal-card p { font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
  .conf-modal-espacio .esquema-titulo { margin: 2px 0 8px; }
  /* ejemplos SIEMPRE apilados en móvil (no en fila) + menos separación */
  .conf-modal-espacio .esquema-ejemplos { flex-direction: column; align-items: center; gap: 16px; margin-bottom: 16px; }
  /* (4) esquemas algo más pequeños; etiquetas (6×4,5 / 3×2) aún legibles */
  .conf-modal-espacio .esquema-pergola-grande  { width: 96px; height: 72px; }
  .conf-modal-espacio .esquema-pergola-pequena { width: 48px; height: 32px; }
}