/* Visit Fageca — Estancias de temporada
   Capa de página para la home de larga estancia (audiencia "estancias").

   Se apoya en tokens.css y components.css: aquí NO se redefine ningún token
   ni se duplica ningún componente existente. Solo hay dos cosas:

     1. Un ajuste de escala. El público de esta página es adulto y mayor,
        muchas veces leyendo en el móvil sin gafas de cerca. Todo sube un
        punto: cuerpo, botones, FAQ y campos de formulario.
     2. Los bloques que esta página necesita y la de familias no tiene
        (fichas estáticas de apartamento, datos prácticos, pasos, formulario).

   Prefijo propio: .vfe-* (visit fageca estancias). Así nunca colisiona con
   los .vf-* compartidos.                                                    */

/* ═══ 1. Escala de lectura ═══════════════════════════════════════════════ */

[data-vf-audience="estancias"] {
  font-size: 17px;
}

[data-vf-audience="estancias"] .vf-btn {
  font-size: 16px;
  padding: 15px 24px;
}

[data-vf-audience="estancias"] .vf-btn--lg {
  font-size: 18px;
  padding: 20px 32px;
}

[data-vf-audience="estancias"] .vf-btn--sm {
  font-size: 15px;
  padding: 11px 18px;
}

[data-vf-audience="estancias"] .vf-faq__q {
  font-size: 19px;
}

[data-vf-audience="estancias"] .vf-faq__a {
  font-size: 17px;
  line-height: 1.65;
}

[data-vf-audience="estancias"] .vf-pillar p,
[data-vf-audience="estancias"] .vf-incluye__item p {
  font-size: 15.5px;
}

[data-vf-audience="estancias"] .vf-nav__link,
[data-vf-audience="estancias"] .vf-nav__sheetLink {
  font-size: 15.5px;
}

/* El acento cálido está restringido por sistema a rating y chip Campus.
   Aquí no hay campus, así que el chip de temporada usa el verde estructural. */
.vfe-chip--temporada {
  background: var(--vf-ok-soft);
  color: var(--vf-ok);
  box-shadow: none;
}

/* ═══ 2. Hero ════════════════════════════════════════════════════════════ */

/* La foto del hero (el pueblo bajo la Serrella) es clara justo en la mitad
   izquierda, que es donde cae el texto. El velo vertical de components.css
   no basta: añadimos uno lateral para que el titular y la entradilla tengan
   contraste real sin apagar la foto entera. */
[data-vf-audience="estancias"] .vf-hero__bg--photo::after {
  /* components.css aplica mix-blend-mode: overlay a este mismo pseudo-elemento
     (regla .vf-hero__bg::after). Con overlay, un velo oscuro casi no oscurece.
     Lo devolvemos a normal para que el degradado haga su trabajo. */
  mix-blend-mode: normal;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(20, 23, 26, .84) 0%,
      rgba(20, 23, 26, .66) 40%,
      rgba(20, 23, 26, .22) 70%,
      rgba(20, 23, 26, .06) 100%),
    linear-gradient(180deg,
      rgba(20, 23, 26, .32) 0%,
      rgba(20, 23, 26, .22) 45%,
      rgba(20, 23, 26, .62) 100%);
}

/* En móvil el texto ocupa todo el ancho, así que el velo tiene que ser
   vertical y más cerrado. */
@media (max-width: 860px) {
  [data-vf-audience="estancias"] .vf-hero__bg--photo::after {
    mix-blend-mode: normal;
    background: linear-gradient(180deg,
      rgba(20, 23, 26, .62) 0%,
      rgba(20, 23, 26, .68) 45%,
      rgba(20, 23, 26, .82) 100%);
  }
}

/* Las píldoras del hero existen en components.css pero solo se muestran
   con body[data-vf-intent="campus"]. Esta página las usa siempre. */
[data-vf-audience="estancias"] .vf-hero__pills {
  display: flex;
}

.vfe-hero__lede {
  margin: 18px 0 4px;
  max-width: 48ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--vf-ink-inv);
  opacity: .92;
}

@media (max-width: 720px) {
  .vfe-hero__lede { font-size: 17px; }
}

/* ═══ 3. Datos prácticos ═════════════════════════════════════════════════ */

.vfe-datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--vf-line);
  border-radius: var(--vf-r-lg);
  overflow: hidden;
  box-shadow: var(--vf-shadow-inset);
}

.vfe-dato {
  background: var(--vf-canvas);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vf-section--deep .vfe-dato { background: var(--vf-canvas-2); }

.vfe-dato__label {
  font-family: var(--vf-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
}

.vfe-dato__value {
  font-family: var(--vf-font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--vf-ink);
}

.vfe-dato__note {
  font-size: 14.5px;
  color: var(--vf-ink-3);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 900px) { .vfe-datos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vfe-datos { grid-template-columns: 1fr; } }

/* ═══ 4. Apartamentos (showroom estático, sin motor de reservas) ══════════ */

.vfe-apts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vfe-apt {
  display: flex;
  flex-direction: column;
  background: var(--vf-canvas);
  border-radius: var(--vf-r-lg);
  overflow: hidden;
  box-shadow: var(--vf-shadow-card);
}

.vfe-apt__photo {
  aspect-ratio: 3 / 2;
  border-radius: 0;
}

.vfe-apt__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.vfe-apt__name {
  font-family: var(--vf-font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}

.vfe-apt__tagline {
  margin: 0;
  font-size: 15.5px;
  color: var(--vf-ink-3);
  line-height: 1.5;
}

.vfe-apt__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 14.5px;
  color: var(--vf-ink-2);
}

.vfe-apt__specs span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.vfe-apt__specs svg { color: var(--vf-ink-3); flex: none; }

@media (max-width: 1000px) { .vfe-apts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { .vfe-apts { grid-template-columns: 1fr; } }

/* Nota bajo la rejilla: el equipamiento es común a los cinco. */
.vfe-apts__nota {
  margin-top: 28px;
  padding: 24px 26px;
  border-radius: var(--vf-r-lg);
  background: var(--vf-canvas);
  box-shadow: var(--vf-shadow-inset);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 28px;
}

.vf-section--deep .vfe-apts__nota { background: var(--vf-canvas-2); }

.vfe-apts__nota span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--vf-ink-2);
}

.vfe-apts__nota svg { color: var(--vf-ok); flex: none; }

@media (max-width: 900px) { .vfe-apts__nota { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .vfe-apts__nota { grid-template-columns: 1fr; } }

/* ═══ 5. Temporadas y precios ════════════════════════════════════════════ */

.vfe-temporadas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.vfe-temporada {
  padding: 32px 34px;
  border-radius: var(--vf-r-lg);
  background: var(--vf-canvas);
  box-shadow: var(--vf-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vfe-temporada--alt {
  background: var(--vf-canvas-2);
  box-shadow: var(--vf-shadow-inset);
}

.vfe-temporada h3 {
  font-family: var(--vf-font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}

.vfe-temporada p {
  margin: 0;
  color: var(--vf-ink-3);
  font-size: 16px;
  line-height: 1.55;
}

.vfe-temporada__precio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--vf-line);
  margin-top: 6px;
}

.vfe-temporada__precio strong {
  font-family: var(--vf-font-mono);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--vf-ink);
}

.vfe-temporada__precio span {
  font-size: 15px;
  color: var(--vf-ink-3);
}

.vfe-temporada ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.vfe-temporada li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15.5px;
  color: var(--vf-ink-2);
  line-height: 1.5;
}

.vfe-temporada li svg { color: var(--vf-ok); flex: none; margin-top: 3px; }

@media (max-width: 860px) { .vfe-temporadas { grid-template-columns: 1fr; } }

/* ═══ 6. Cómo funciona (pasos) ═══════════════════════════════════════════ */

.vfe-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: vfe-step;
}

.vfe-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
  border-top: 2px solid var(--vf-ink);
}

.vfe-step__num {
  font-family: var(--vf-font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--vf-ink-3);
}

.vfe-step h4 {
  font-family: var(--vf-font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

.vfe-step p {
  margin: 0;
  font-size: 15.5px;
  color: var(--vf-ink-3);
  line-height: 1.55;
}

@media (max-width: 900px) { .vfe-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vfe-steps { grid-template-columns: 1fr; } }

/* ═══ 7. Formulario de solicitud ═════════════════════════════════════════ */

.vfe-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

.vfe-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vfe-field--wide { grid-column: 1 / -1; }

.vfe-field > label {
  font-size: 15px;
  font-weight: 500;
  color: var(--vf-ink);
}

.vfe-field__hint {
  font-size: 13.5px;
  color: var(--vf-ink-3);
  line-height: 1.45;
}

.vfe-field input,
.vfe-field select,
.vfe-field textarea {
  width: 100%;
  font: inherit;
  font-size: 16.5px;
  color: var(--vf-ink);
  background: var(--vf-canvas);
  border: 0;
  border-radius: var(--vf-r-sm);
  box-shadow: inset 0 0 0 1px var(--vf-line-2);
  padding: 14px 16px;
}

.vfe-field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}

.vfe-field input:focus,
.vfe-field select:focus,
.vfe-field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--vf-ink);
}

/* Mascotas: dos opciones, sin desplegable. */
.vfe-radios { display: flex; gap: 10px; flex-wrap: wrap; }

.vfe-radios label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: var(--vf-r-full);
  background: var(--vf-canvas);
  box-shadow: inset 0 0 0 1px var(--vf-line-2);
  font-size: 16px;
  cursor: pointer;
}

.vfe-radios input { accent-color: var(--vf-ink); width: 18px; height: 18px; }

.vfe-radios label:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--vf-ink);
  background: var(--vf-canvas-2);
}

.vfe-form__foot {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.vfe-form__nota {
  font-size: 14px;
  color: var(--vf-ink-3);
  line-height: 1.5;
  max-width: 46ch;
  margin: 0;
}

.vfe-form__nota a { color: var(--vf-ink); text-decoration: underline; text-underline-offset: 3px; }

.vfe-form__error {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: var(--vf-r-sm);
  background: var(--vf-err-soft);
  color: var(--vf-err);
  font-size: 15px;
}

.vfe-form__error[hidden] { display: none; }

@media (max-width: 720px) {
  .vfe-form__grid { grid-template-columns: 1fr; }
}

/* ═══ 8. Casanova — fichas de apartamento ════════════════════════════════
   Showroom, no motor de reservas: la ficha enseña la casa y termina en una
   conversación, no en un calendario. Por eso no hay precio ni CTA de
   disponibilidad en ninguna parte de este bloque.                          */

.vfe-casas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.vfe-casa {
  display: flex;
  flex-direction: column;
  background: var(--vf-canvas);
  border-radius: var(--vf-r-lg);
  overflow: hidden;
  box-shadow: var(--vf-shadow-card);
}

.vf-section--deep .vfe-casa { background: var(--vf-canvas-2); }

.vfe-casa__portada {
  aspect-ratio: 3 / 2;
  border-radius: 0;
  width: 100%;
  padding: 0;
  border: 0;
  display: block;
  background: var(--vf-canvas-deep);
}

button.vfe-casa__portada { cursor: zoom-in; }

.vfe-casa__cuerpo {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.vfe-casa__nombre {
  font-family: var(--vf-font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}

.vfe-casa__texto {
  margin: 0;
  font-size: 16px;
  color: var(--vf-ink-3);
  line-height: 1.55;
}

.vfe-casa__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vfe-casa__specs span {
  font-family: var(--vf-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: var(--vf-r-full);
  background: var(--vf-canvas-deep);
  color: var(--vf-ink-2);
}

/* Tira de miniaturas: el resto de la galería del backoffice. */
.vfe-casa__tira {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vfe-casa__mini {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: var(--vf-r-sm);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--vf-canvas-deep);
  flex: none;
}

.vfe-casa__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vfe-casa__mini--mas {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vf-font-mono);
  font-size: 13px;
  color: var(--vf-ink-2);
  box-shadow: inset 0 0 0 1px var(--vf-line-2);
}

.vfe-casa__cta { align-self: flex-start; margin-top: auto; }

@media (max-width: 860px) { .vfe-casas { grid-template-columns: 1fr; gap: 24px; } }

/* ═══ 9. Visor de fotos ══════════════════════════════════════════════════
   Galería a pantalla completa con paso de fotos. Las flechas son grandes a
   propósito: el público de esta página no acierta en un objetivo de 24px.  */

.vfe-visor {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.vfe-visor[hidden] { display: none; }

.vfe-visor__fondo {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(20, 23, 26, .94);
  cursor: zoom-out;
}

.vfe-visor__marco {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(1200px, 100%);
  pointer-events: none;
}

.vfe-visor__img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--vf-r-md);
  background: rgba(255, 255, 255, .04);
}

.vfe-visor__pie {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: rgba(245, 241, 232, .85);
}

.vfe-visor__casa {
  font-family: var(--vf-font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.vfe-visor__cuenta {
  font-family: var(--vf-font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(245, 241, 232, .6);
}

.vfe-visor__nav,
.vfe-visor__x {
  position: absolute;
  border: 0;
  border-radius: var(--vf-r-full);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vfe-visor__nav[hidden] { display: none; }

.vfe-visor__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  font-size: 34px;
  padding-bottom: 4px;
}

.vfe-visor__nav--prev { left: 20px; }
.vfe-visor__nav--next { right: 20px; }

.vfe-visor__x {
  top: 18px;
  right: 20px;
  width: 48px;
  height: 48px;
  font-size: 28px;
}

@media (hover: hover) {
  .vfe-visor__nav:hover,
  .vfe-visor__x:hover { background: rgba(255, 255, 255, .26); }
}

.vfe-visor__nav:focus-visible,
.vfe-visor__x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 720px) {
  .vfe-visor { padding: 12px; }
  .vfe-visor__img { max-height: 70vh; }
  /* En móvil se pasa deslizando; las flechas bajan y se apartan de la foto. */
  .vfe-visor__nav {
    top: auto;
    bottom: 22px;
    transform: none;
    width: 54px;
    height: 54px;
  }
  .vfe-visor__nav--prev { left: 24px; }
  .vfe-visor__nav--next { right: 24px; }
}

/* ═══ 10. Vida — parte viva ══════════════════════════════════════════════
   Las entradas que Julio publica desde /admin/vida.php. Una foto y un texto,
   sin más jerarquía: es un diario, no un blog.                             */

.vfe-diario {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 980px;
}

.vfe-nota {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
  background: var(--vf-canvas);
  border-radius: var(--vf-r-lg);
  padding: 22px;
  box-shadow: var(--vf-shadow-card);
}

.vfe-nota__foto {
  aspect-ratio: 4 / 3;
  border-radius: var(--vf-r-md);
  background: var(--vf-canvas-deep);
}

.vfe-nota__cuerpo { min-width: 0; padding: 4px 4px 4px 0; }

.vfe-nota__fecha {
  font-family: var(--vf-font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
}

.vfe-nota__titulo {
  font-family: var(--vf-font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}

.vfe-nota__texto p {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--vf-ink-2);
  max-width: 62ch;
}

.vfe-nota__texto p:last-child { margin-bottom: 0; }

.vfe-diario__vacio {
  padding: 40px 32px;
  border-radius: var(--vf-r-lg);
  background: var(--vf-canvas);
  box-shadow: var(--vf-shadow-inset);
  max-width: 62ch;
  color: var(--vf-ink-3);
  font-size: 17px;
}

.vfe-diario__vacio p { margin: 0 0 10px; }
.vfe-diario__vacio p:last-child { margin: 0; }
.vfe-diario__vacio a { color: var(--vf-ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .vfe-nota { grid-template-columns: 1fr; gap: 18px; }
  .vfe-nota__foto { aspect-ratio: 16 / 10; }
  .vfe-nota__cuerpo { padding: 0; }
  .vfe-nota__titulo { font-size: 23px; }
}

/* ═══ 11. Portadas de apartamento en la home ═════════════════════════════
   Solo nombre y foto: el detalle está en /casanova.                        */

.vfe-portadas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.vfe-portada {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.vfe-portada .vf-ph {
  aspect-ratio: 4 / 5;
  border-radius: var(--vf-r-md);
  overflow: hidden;
}

.vfe-portada span {
  font-family: var(--vf-font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (hover: hover) {
  .vfe-portada .vf-ph img { transition: transform .4s ease; }
  .vfe-portada:hover .vf-ph img { transform: scale(1.04); }
}

@media (max-width: 1000px) { .vfe-portadas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .vfe-portadas { grid-template-columns: repeat(2, 1fr); gap: 14px; } }