/* ==========================================================================
   Estilos propios de cada página
   ========================================================================== */

/* ---------- Portada: hero en marco redondeado ---------- */
.hero { padding-block: 18px 0; }
.hero__marco { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: clamp(520px, 48vw, 640px); background: linear-gradient(110deg, #fafafc 0%, #ececf3 100%); }
.hero__texto { position: relative; z-index: 2; display: grid; gap: 18px; align-content: center; justify-items: start; padding: clamp(32px, 5vw, 72px); }
.hero__texto .eyebrow--marca { color: var(--navy); font-weight: 600; }
.hero h1 { color: var(--navy); max-width: 14ch; }
.hero__lead { max-width: 46ch; font-size: var(--fs-lead); color: var(--ink-soft); }
.hero__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 10px; }
.hero__visual { position: relative; }
.hero__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.hero__aviso { position: absolute; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 3; display: grid; gap: 2px; min-width: 250px; padding: 16px 20px; border-radius: var(--r-card); background: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow); transition: transform .3s var(--ease); }
.hero__aviso:hover { transform: translateY(-3px); }
.hero__aviso .eyebrow { font-size: .64rem; letter-spacing: .18em; }
.hero__aviso strong { font-size: 1.15rem; font-weight: 600; }
.hero__aviso span:last-child { font-size: .86rem; color: var(--navy); font-weight: 600; }
@media (max-width: 900px) {
    .hero__marco { grid-template-columns: 1fr; min-height: 0; }
    .hero__visual { min-height: 300px; order: -1; }
    .hero__visual img { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
    .hero__aviso { position: static; margin: 0 18px 18px; min-width: 0; }
}

/* ---------- Portada: espacios (mosaico) ---------- */
.mosaico { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: repeat(2, minmax(250px, 1fr)); gap: 18px; }
.mosaico .card-espacio { min-height: 0; }
.mosaico .card-espacio:nth-child(1) { grid-row: 1 / span 2; }
.mosaico .card-espacio:nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 900px) {
    .mosaico { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .mosaico .card-espacio { min-height: 300px; }
    .mosaico .card-espacio:nth-child(1) { grid-row: auto; grid-column: 1 / -1; min-height: 380px; }
    .mosaico .card-espacio:nth-child(4) { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .mosaico { grid-template-columns: 1fr; } }

/* ---------- Portada: por qué COWIN (marco con foto y lista numerada) ---------- */
.explica { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); padding: 18px; border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--surface); }
.explica__foto { border-radius: 14px; overflow: hidden; min-height: 460px; box-shadow: var(--shadow-sm); }
.explica__foto img { width: 100%; height: 100%; object-fit: cover; }
.explica__texto { display: grid; gap: 14px; align-content: center; justify-items: start; padding: clamp(8px, 2vw, 28px) clamp(8px, 2vw, 24px) clamp(8px, 2vw, 28px) 0; }
.explica__texto h2 { max-width: 14ch; }
.explica__lista { display: grid; gap: 18px; margin: 6px 0 8px; }
.explica__lista li { display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; }
.explica__num { font-size: .85rem; font-weight: 600; color: var(--ink-soft); padding-top: 3px; }
.explica__lista h3 { font-size: 1.1rem; margin-bottom: 4px; }
.explica__lista p { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; grid-column: 2; }
@media (max-width: 900px) { .explica { grid-template-columns: 1fr; } .explica__foto { min-height: 280px; } .explica__texto { padding: 8px; } }

/* ---------- Portada: pasos ---------- */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.paso { display: grid; gap: 12px; align-content: start; padding: 30px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.paso:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.paso__num { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 600; }
.paso:nth-child(2) .paso__num { background: var(--blue); }
.paso:nth-child(3) .paso__num { background: var(--green); }
.paso h3 { font-size: 1.25rem; }
.paso p { color: var(--ink-soft); }
@media (max-width: 820px) { .pasos { grid-template-columns: 1fr; } }

/* ---------- Portada: preguntas frecuentes ---------- */
.faq-seccion { display: grid; grid-template-columns: .8fr 1.4fr; gap: clamp(28px, 6vw, 80px); align-items: start; }
.faq-seccion__intro { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 14px; justify-items: start; }
.faq-seccion__intro p:not(.eyebrow) { color: var(--ink-soft); }
.faq-seccion__contacto { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 8px; }
@media (max-width: 900px) { .faq-seccion { grid-template-columns: 1fr; } .faq-seccion__intro { position: static; } }

/* ---------- Nosotros ---------- */
.pilares { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pilar { display: grid; gap: 14px; align-content: start; justify-items: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pilar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pilar p { color: var(--ink-soft); }
.pilar__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface); color: var(--navy); margin-bottom: 6px; }
.pilar:nth-child(1) .pilar__ico { color: var(--blue); }
.pilar:nth-child(2) .pilar__ico { color: var(--green); }
.pilar:nth-child(3) .pilar__ico { color: var(--red); }
.pilar:nth-child(4) .pilar__ico { color: #c98a0d; }
@media (max-width: 760px) { .pilares { grid-template-columns: 1fr; } }

.relaciones { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(28px, 6vw, 80px); }
.relaciones__texto { display: grid; gap: 18px; justify-items: start; }
.relaciones__texto p:not(.eyebrow) { color: var(--ink-soft); font-size: var(--fs-lead); }
.relaciones__visual { display: grid; place-items: center; padding: clamp(20px, 4vw, 48px); border-radius: var(--r-frame); background: var(--surface); }
.relaciones__visual img { max-height: 440px; width: auto; mix-blend-mode: multiply; }
@media (max-width: 860px) { .relaciones { grid-template-columns: 1fr; } .relaciones__visual { order: -1; } }
.lista-check { display: grid; gap: 12px; }
.lista-check li { display: flex; align-items: flex-start; gap: 12px; }
.lista-check .icono { margin-top: 3px; padding: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 2.4; }
.lista-check--grande { gap: 12px; }
.lista-check--grande li { padding: 16px 18px; border-radius: var(--r-card); background: var(--surface); }

.ubicacion { display: grid; grid-template-columns: 1fr 1.1fr; align-items: stretch; gap: clamp(20px, 4vw, 48px); padding: 18px; border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--surface); }
.ubicacion__texto { display: grid; gap: 16px; align-content: center; justify-items: start; padding: clamp(8px, 2vw, 28px); }
.ubicacion__texto p:not(.eyebrow) { color: var(--ink-soft); }
.ubicacion__texto address { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.ubicacion__texto address .icono { margin-top: 3px; color: var(--blue); }
.ubicacion__foto { border-radius: 14px; overflow: hidden; min-height: 300px; }
.ubicacion__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .ubicacion { grid-template-columns: 1fr; } }

/* ---------- Detalle de un espacio ---------- */
.detalle { padding-block: clamp(20px, 3vw, 36px) var(--espacio-seccion); }
.detalle__rejilla { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.detalle__ficha { position: sticky; top: calc(var(--nav-h) + 28px); display: grid; gap: 18px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-frame); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.detalle__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.detalle__ficha h1 { font-size: clamp(1.9rem, 3vw + 1rem, 2.8rem); }
.detalle__resumen { color: var(--ink-soft); font-size: 1.04rem; }
.detalle__precios { display: grid; gap: 10px; padding: 18px 0; border-block: 1px solid var(--line); }
.detalle__precios li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.detalle__precios small { color: var(--ink-soft); font-size: .86rem; }
.detalle__dato { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-mid); font-size: .96rem; }
.detalle__dato .icono { margin-top: 2px; color: var(--blue); }
.detalle__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.detalle__nota { color: var(--ink-soft); font-size: .82rem; }
.detalle__cuerpo { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 6vw, 80px); }
.detalle__cuerpo h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 22px; }
.detalle__incluye .lista-check { grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.detalle__acerca p { color: var(--ink-soft); font-size: 1.04rem; }
@media (max-width: 960px) {
    .detalle__rejilla, .detalle__cuerpo { grid-template-columns: 1fr; }
    .detalle__ficha { position: static; }
}
@media (max-width: 620px) { .detalle__incluye .lista-check { grid-template-columns: 1fr; } }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: .85fr 1.2fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
.contacto__info { display: grid; gap: 12px; }
.dato-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.dato-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.dato-card > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.dato-card small { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
.dato-card strong { font-size: 1.02rem; font-weight: 600; word-break: break-word; }
.dato-card em { font-style: normal; font-size: .9rem; color: var(--ink-soft); }
.dato-card__ico { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 14px; background: var(--surface); color: var(--navy); }
.dato-card__ico--verde { background: #e2f5e4; color: var(--green); }
.dato-card__flecha { color: var(--ink-soft); transition: transform .3s var(--ease), color .3s; }
.dato-card:hover .dato-card__flecha { transform: translate(3px, -3px); color: var(--navy); }
.contacto__redes { display: flex; gap: 10px; padding-top: 8px; }
.contacto__redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; transition: background .25s, color .25s; }
.contacto__redes a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.contacto__form { display: grid; gap: 22px; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-frame); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.contacto__form h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.mapa { position: relative; height: clamp(300px, 42vw, 460px); border-radius: var(--r-frame); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.mapa iframe { width: 100%; height: 100%; border: 0; }
.mapa__enlace { position: absolute; left: 20px; bottom: 20px; }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }

/* ---------- Aviso de privacidad ---------- */
.legal { max-width: 820px; display: grid; gap: 18px; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-frame); background: #fff; border: 1px solid var(--line); color: var(--ink-mid); }
.legal ul { display: grid; gap: 6px; padding-left: 22px; list-style: disc; }
.legal a { color: var(--blue); text-decoration: underline; }
.legal__fecha { color: var(--ink-soft); font-size: .9rem; }

/* ---------- 404 ---------- */
.error404 { display: grid; place-items: center; min-height: 60vh; }
.error404__caja { display: grid; justify-items: center; gap: 20px; text-align: center; max-width: 560px; }
.error404__caja p { color: var(--ink-soft); }
.error404__codigo { font-size: clamp(5rem, 16vw, 10rem); font-weight: 300; letter-spacing: -.06em; line-height: 1; color: var(--navy); }

/* Selector de horas (ficha de espacio) */
.reserva { margin: 20px 0; padding: 18px; border: 1px solid #e3e1ee; border-radius: 14px; background: #fff; display: grid; gap: 12px; }
.reserva__titulo { font-size: 1.05rem; margin: 0; }
.reserva .campo { display: grid; gap: 6px; }
.reserva label, .reserva__lbl { font-weight: 600; font-size: .9rem; }
.reserva small { font-weight: 400; color: var(--ink-soft); }
.reserva input { width: 100%; padding: 10px 12px; border: 1px solid #d9d6e8; border-radius: 10px; font: inherit; }
.reserva__horas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.reserva__hora { padding: 9px 0; border: 1px solid #d9d6e8; border-radius: 10px; background: #fff; font: inherit; font-size: .85rem; cursor: pointer; }
.reserva__hora:hover { border-color: #29235C; }
.reserva__hora.is-on { background: #29235C; border-color: #29235C; color: #fff; }
.reserva__resumen { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f4f3fa; font-size: .92rem; }
.reserva__nota { margin: 0; color: var(--ink-soft); font-size: .8rem; }
.reserva__hora:disabled { cursor: not-allowed; background: #f1f0f6; color: #9a97ad; border-color: #e6e4ef; }
.reserva__hora.is-ocupada { text-decoration: line-through; }
.reserva__hora.is-pasada { opacity: .5; }
.reserva__aviso { margin: 0; font-size: .82rem; color: #8a5a00; background: #fff6e0; padding: 8px 10px; border-radius: 8px; }
.reserva__aviso[hidden] { display: none; }
.reserva__cargando { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: .85rem; }