:root{
  --ff-primary:#0F2B66;
  --ff-muted:#445066;
  --ff-surface:#ffffff;
  --ff-gold:#DDB43B; /* ajusta al dorado exacto */
}

/* ===== Héroe ===== */
.ff-hero{
  background: var(--ff-surface);
  overflow: clip;
}

/* franja superior */
.ff-hero__topbar{
  position: sticky; /* se queda arriba al hacer scroll inicial */
  top: 0;
  height: 12px;
  background: var(--ff-gold);
  z-index: 1;
}

/* Grid centrado perfecto */
.ff-hero__grid{
  min-height: clamp(420px, 72vh, 720px); /* alto agradable en desktop/móvil */
  padding: clamp(28px, 6vw, 56px) clamp(16px, 5vw, 32px);
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  row-gap: clamp(12px, 2.5vh, 20px);
}

/* Imagen compuesta: JAMÁS se deforma */
.ff-hero__logo{
  display: block;
  margin-inline: auto;
  width: min(1100px, 92vw);   /* ancho máx controlado */
  height: auto !important;    /* evita achate/estire vertical */
  aspect-ratio: auto;         /* usa proporción real del archivo */
  object-fit: contain;        /* seguridad extra: sin recorte ni distorsión */
  image-rendering: auto;
}

/* Claim */
.ff-claim__title{
  color: var(--ff-primary);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.5vw + .8rem, 1.9rem);
  line-height: 1.2;
  margin: 0;
  letter-spacing: .2px;
}

.ff-claim__text{
  color: var(--ff-muted);
  font-size: clamp(.95rem, .8vw + .7rem, 1.125rem);
  margin: 0;
}

/* Línea sutil */
.ff-divider{
  border: 0;
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: clamp(14px, 3vh, 24px) auto 0;
  width: min(1100px, 94vw);
}

/* Ajustes finos responsivos */
@media (max-width: 575.98px){
  .ff-hero__grid{ min-height: 68vh; }
}

:root{
  --ff-primary:#0F2B66;
  --ff-muted:#445066;
  --ff-surface:#ffffff;
  --ff-gold:#DDB43B;  /* dorado de la franja */
}

/* Sección */
.ff-hero{ background:var(--ff-surface); overflow:clip; }

/* Franja superior */
.ff-hero__topbar{
  position: sticky; top:0; height:12px; background:var(--ff-gold); z-index:1;
}

/* Contenedor interno del héroe (limita ancho y centra) */
.ff-hero__content{
  width:min(1200px,94vw);
  margin-inline:auto;
  min-height:clamp(460px, 74vh, 760px);        /* alto agradable */
  padding:clamp(24px, 4.5vw, 48px) 0;          /* aire superior/inferior */
  display:grid;
  grid-template-rows:auto auto;
  justify-items:center;
}

/* Logo compuesto: centrado, sin deformación */
.ff-hero__logo{
  display:block;
  width:min(1120px, 92vw);                      /* controla el ancho máximo */
  height:auto !important;                       /* evita achatado */
  aspect-ratio:auto;
  object-fit:contain;
}

/* Claim: mayor separación respecto al logo */
.ff-claim{
  margin-top:clamp(24px, 7vh, 72px);            /* >>> separación grande como referencia */
  max-width:min(1100px, 92vw);
}
.ff-claim__title{
  color:var(--ff-primary);
  font-weight:700;
  font-size:clamp(1.1rem, 1.5vw + .8rem, 1.9rem);
  line-height:1.25;
}
.ff-claim__text{
  color:var(--ff-muted);
  font-size:clamp(.95rem, .8vw + .65rem, 1.125rem);
}

/* Línea divisoria como en el diseño */
.ff-separator{
  width:min(1180px, 95vw);
  margin:clamp(28px, 6vh, 56px) auto 0;         /* debajo del claim */
  border:0; height:2px; background:rgba(0,0,0,1);
}

/* Móviles: asegura centrado y altura */
@media (max-width:575.98px){
  .ff-hero__content{ min-height:68vh; }
}




/* =========================
   SECCIÓN 2 — AGENDA
   ========================= */
:root{
  --ff-sky: #B8DDEB;  /* celeste del marco/franja (ajústalo si tu manual tiene el HEX exacto) */
  --ff-cta-text: #E4B629; /* amarillo del texto del botón (ajusta al oficial) */
  --ff-cta-ico:  #E7736D; /* color del ícono flecha (ajusta al oficial) */
}

/* Tarjeta general con borde grueso y radio grande */
.ff-agenda-card{
  max-width: 1200px;
  border: 12px solid var(--ff-sky);
  border-radius: 22px;
  overflow: hidden;               /* para que la imagen respete el radio interior */
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* Imagen superior (sin deformación) */
.ff-agenda-media{ position: relative; }
.ff-agenda-img{
  display:block; width:100%; height:auto !important;
  object-fit: cover;
  border-bottom-left-radius: 16px;   /* leve redondeo interior para que se vea como en el diseño */
  border-bottom-right-radius: 16px;
}

/* Franja inferior celeste */
.ff-agenda-bar{
  background: var(--ff-sky);
  padding: clamp(16px, 2.2vw, 24px) clamp(18px, 3vw, 28px);
}

/* Títulos (intenta emular el peso redondo del arte) */
.ff-agenda-title{
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(1.8rem, 2.8vw + .4rem, 3rem);   /* grande como en el diseño */
  line-height: 1;
  letter-spacing: .3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.ff-agenda-subtitle{
  color: #ffffff;
  opacity: .92;
  font-weight: 700;
  font-size: clamp(1rem, 1.2vw + .5rem, 1.25rem);
  margin-top: .25rem;
}

/* Botón píldora con borde suave y “papercut” sutil */
.ff-btn-cta{
  display:inline-flex; align-items:center; gap:.6rem;
  background:#fff;
  color: var(--ff-cta-text);
  text-decoration:none; font-weight:800;
  padding: .85rem 1.2rem;
  border-radius: 999px;
  border: 2px solid #F1F4F6;
  box-shadow: 0 3px 0 rgba(0,0,0,.06), 0 8px 16px rgba(0,0,0,.07) inset;
  white-space: nowrap;
}
.ff-btn-cta:hover{ filter: brightness(.97); }
.ff-btn-ico{
  display:inline-grid; place-items:center;
  width: 28px; height: 28px; border-radius: 999px;
  background: #fff;
  color: var(--ff-cta-ico);
  box-shadow: 0 0 0 2px #FFE9E8 inset;
}
.ff-btn-text{ line-height:1; }

/* Responsive fino */
@media (max-width: 575.98px){
  .ff-agenda-bar{
    flex-direction: column;
    align-items: stretch !important;
    gap: .75rem;
  }
  .ff-btn-cta{ align-self: center; }
}



/* ===== Variantes genéricas de tarjeta (reutilizable) ===== */
:root{
  --ff-green: #4BA055;        /* borde/barra verde */
  --ff-paper-stroke: #f2f2f2; /* borde interior del botón tipo “papercut” */
  --ff-paper-shadow: rgba(0,0,0,.06);
}

.ff-card__frame{
  max-width: 1200px;
  border: 12px solid var(--ff-sky); /* valor por defecto (celeste) */
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.ff-card__media{ position: relative; }
.ff-card__img{
  display:block; width:100%; height:auto !important;
  object-fit: cover;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.ff-card__bar{
  background: var(--ff-sky); /* por defecto celeste; cada variante lo sobreescribe */
  padding: clamp(16px, 2.2vw, 24px) clamp(18px, 3vw, 28px);
}

.ff-card__title{
  color:#fff; font-weight:800;
  font-size: clamp(1.8rem, 2.8vw + .4rem, 3rem);
  line-height:1; letter-spacing:.3px; text-shadow:0 1px 0 rgba(0,0,0,.05);
}
.ff-card__subtitle{
  color:#fff; opacity:.92; font-weight:700;
  font-size: clamp(1rem, 1.2vw + .5rem, 1.25rem);
  margin-top:.25rem;
}

/* Botón “papercut” reutilizable */
.ff-btn-cta{
  display:inline-flex; align-items:center; gap:.6rem;
  background:#fff; text-decoration:none; font-weight:800;
  padding:.9rem 1.25rem; border-radius:999px; color:var(--ff-cta-text);
  border:2px solid #F1F4F6; box-shadow:0 3px 0 var(--ff-paper-shadow), 0 8px 16px rgba(0,0,0,.07) inset;
  white-space:nowrap;
}
.ff-btn-cta:hover{ filter:brightness(.97); }
.ff-btn-ico{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:999px; background:#fff; color:var(--ff-cta-ico);
  box-shadow:0 0 0 2px #FFE9E8 inset;
}

/* Efecto “papercut” (borde irregular sutil) */
.ff-btn-cta--paper{
  position:relative;
}
.ff-btn-cta--paper::after{
  content:""; position:absolute; inset:6px 10px 6px 10px;
  border-radius:999px; border:2px dashed var(--ff-paper-stroke);
  opacity:.55; pointer-events:none;
}

/* ======== VARIANTE VERDE (Sección 3) ======== */
.ff-card--green .ff-card__frame{ border-color: var(--ff-green); }
.ff-card--green .ff-card__bar{ background: var(--ff-green); }
.ff-card--green .ff-btn-cta{ color:#E6BB2A; }   /* texto del botón */
.ff-card--green .ff-btn-ico{ color:#E7736D; }   /* ícono flecha */

/* Responsive */
@media (max-width:575.98px){
  .ff-card__bar{ flex-direction:column; gap:.75rem; }
  .ff-btn-cta{ align-self:center; }
}




:root{
  --ff-social-title:#6D93BB;   /* azul del título */
  --ff-pill-border:#4C8BC7;    /* borde de la píldora */
  --ff-pill-bg:#ffffff;
  --ff-pill-text:#1f2937;
  --ff-shadow-sm:0 4px 10px rgba(0,0,0,.08);
}

.ff-social-title{
  color: var(--ff-social-title);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.1vw + 1rem, 2rem);
  letter-spacing:.2px;
}

/* Contenedor de cada red */
.ff-social-item{
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: start;
  row-gap: .25rem;
}

/* Icono circular superpuesto */
.ff-social-icon{
  width: 92px; height: 92px;
  display:grid; place-items:center;
  border-radius: 999px;
  box-shadow: var(--ff-shadow-sm);
  transform: translateY(18px);          /* se mete sobre la píldora */
  z-index: 2;
}
.ff-social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* Píldora con @usuario */
.ff-social-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 240px; padding: .8rem 1.2rem;
  background: var(--ff-pill-bg);
  color: var(--ff-pill-text);
  border: 3px solid var(--ff-pill-border);
  border-radius: 999px;
  font-weight: 700;
  box-shadow: var(--ff-shadow-sm);
}

/* Hover suave */
.ff-social-item:hover .ff-social-pill{
  filter: brightness(.98);
}
.ff-social-item:active .ff-social-pill{
  transform: translateY(1px);
}

/* Responsive fino */
@media (max-width:575.98px){
  .ff-social-icon{ width:84px; height:84px; transform: translateY(16px); }
  .ff-social-pill{ min-width: 220px; padding: .75rem 1rem; }
}



/* =========================
   SECCIÓN FINAL — FOOTER IMG
   ========================= */
.ff-footer-illustration{
  width:100%;
  margin-top:clamp(40px,8vh,80px);
  display:block;
  overflow:hidden;
}

.ff-footer-img{
  display:block;
  width:100%;
  height:auto !important;
  object-fit:contain;
  object-position:center bottom;
}



/* Valores reales del marco */
:root{
  --ff-card-border: 12px;
  --ff-card-radius: 22px;
}

/* Tarjetas con marco */
.ff-agenda-card,
.ff-card__frame{
  border: var(--ff-card-border) solid var(--ff-sky); /* o var(--ff-green) en la variante */
  border-radius: var(--ff-card-radius);
  overflow: hidden;                     /* ← importante para recortar el contenido interno */
  background:#fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* Contenedor de la imagen: aplica el radio interior exacto */
.ff-agenda-media,
.ff-card__media{
  position: relative;
  overflow: hidden;                     /* ← evita que se vea el fondo en las esquinas */
  border-bottom-left-radius: calc(var(--ff-card-radius) - var(--ff-card-border));
  border-bottom-right-radius: calc(var(--ff-card-radius) - var(--ff-card-border));
}

/* Imagen: SIN radios (los hereda del contenedor) */
.ff-agenda-img,
.ff-card__img{
  display:block;
  width:100%;
  height:auto !important;
  object-fit: cover;
  border-radius: 0 !important;          /* ← quita el 16px anterior */
}



/* === parámetros base del marco === */
:root{
  --ff-card-border: 12px;   /* grosor del borde */
  --ff-card-radius: 26px;   /* prueba 24–28 para “más redondo” */
}

/* Marco genérico (agenda y tarjetas) */
.ff-agenda-card,
.ff-card__frame{
  position: relative;
  border: var(--ff-card-border) solid var(--ff-sky); /* se sobrescribe por variante */
  border-radius: var(--ff-card-radius);
  overflow: hidden;                    /* recorta TODO con el mismo radio */
  background: var(--ff-card-bg, #fff); /* color detrás de la imagen (ver variantes) */
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* Imagen: sin radios, sin gaps */
.ff-agenda-img,
.ff-card__img{
  display:block;
  width:100%;
  height:auto !important;
  object-fit: cover;
  border-radius: 0 !important;
}

/* Barra inferior */
.ff-agenda-bar,
.ff-card__bar{
  background: var(--ff-sky);                 /* por defecto */
  padding: clamp(16px, 2.2vw, 24px) clamp(18px, 3vw, 28px);
}

/* === Variante CELESTE (Agenda) === */
.ff-agenda-card{
  --ff-card-bg: var(--ff-sky);               /* ¡color de fondo igual a la franja! */
}

/* === Variante VERDE (Sitios turísticos) === */
.ff-card--green .ff-card__frame{
  --ff-card-bg: var(--ff-green);             /* fondo del marco = franja verde */
  border-color: var(--ff-green);
}
.ff-card--green .ff-card__bar{
  background: var(--ff-green);
}


/* ===== Títulos de tarjetas Family Friendly ===== */
.ff-agenda-title,
.ff-card__title{
  display:block;
  color:#fff;
  font-family: 'Poppins', 'Nunito', 'Baloo 2', sans-serif; /* puedes cambiar a la del manual */
  font-weight:900;
  font-size:clamp(2rem, 3vw + .5rem, 3.4rem);
  line-height:1.05;
  letter-spacing:.2px;
  margin-bottom:.15rem;
}

.ff-agenda-subtitle,
.ff-card__subtitle{
  display:block;
  color:#fff;
  font-weight:700;
  font-size:clamp(1.1rem, 1.3vw + .5rem, 1.35rem);
  line-height:1;
  margin:0;
  padding-left: 70px;
}

/* Alineación izquierda dentro de la barra */
.ff-agenda-titles,
.ff-card__titles{
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* En móvil, centrado */
@media (max-width:575.98px){
  .ff-agenda-titles,
  .ff-card__titles{
    text-align:center;
  }
}





/* ===== Botón como imagen ===== */
.ff-btn-image{
  display:inline-block;
  transition:transform .25s ease, box-shadow .25s ease;
}
.ff-btn-image img{
  display:block;
  width:auto;
  max-width:220px;        /* ajusta al ancho natural del PNG */
  height:auto;
}

/* Hover: leve zoom y sombra suave */
.ff-btn-image:hover{
  transform:scale(1.05);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

/* Click (active): rebote sutil */
.ff-btn-image:active{
  transform:scale(.97);
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}

/* Centrado automático en mobile si el layout es vertical */
@media (max-width:575.98px){
  .ff-btn-image{ margin-inline:auto; }
}