/**
 * Doguify — Landings de promoción (Hoteles / Campings)
 * =====================================================
 * 1. Base y contenedor
 * 2. Compatibilidad con el tema (Astra)
 * 3. Componentes
 * 4. Responsive — todo el responsive vive aquí, en un solo sitio
 *
 * Puntos de ruptura únicos: 1024px · 768px · 520px · 380px
 *
 * Las secciones de redes y noticias llevan sus estilos base EN LÍNEA en el
 * HTML (el tema los pisaba). Esos estilos nunca fijan anchos, para que este
 * archivo pueda adaptarlos sin conflictos.
 */

/* ===================================================================
   1. BASE Y CONTENEDOR
   =================================================================== */
.dgp-landing,
.dgp-landing *{ box-sizing:border-box; min-width:0; }

.dgp-landing{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:#111114; background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; max-width:100%;
}
.dgp-landing a{ color:#305CCC; text-decoration:none; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.dgp-landing img{ max-width:100%; height:auto; }
.dgp-landing h1,.dgp-landing h2,.dgp-landing h3{ text-wrap:pretty; }

@keyframes dg-nivel{ 0%,26%{opacity:1} 33%,100%{opacity:0} }

/* Hovers del diseño original */
.dgp-landing a[style*="background:#305CCC"]:hover{ background:#244497 !important; }
.dgp-landing a[style*="background:#fff"][style*="color:#305CCC"]:hover{ background:#C8D6F3 !important; }
.dgp-landing a[style*="border:1px solid #305CCC"]:hover{ background:#C8D6F3 !important; }
.dgp-landing a[style*="border:1px solid #EAEAEC"]:hover{ border-color:#305CCC !important; }

/* ===================================================================
   2. COMPATIBILIDAD CON EL TEMA (Astra)
   Solo neutralizamos su display:flex. No tocamos anchos ni márgenes.
   =================================================================== */
body.dgp-landing-page .site-content .ast-container,
body.dgp-landing-page .ast-container,
body.dgp-landing-page #primary,
body.dgp-landing-page #content,
body.dgp-landing-page .site-main,
body.dgp-landing-page .ast-article-single,
body.dgp-landing-page .entry-content{ display:block !important; }

body.dgp-landing-page{ overflow-x:hidden; }
.dgp-landing{ display:block !important; }
.dgp-landing > div:first-child{ display:block !important; max-width:1440px; margin:0 auto; }

/* ===================================================================
   3. COMPONENTES
   =================================================================== */

/* --- Huecos de imagen --- */
.dgp-landing .img-ph{ display:block; overflow:hidden; background:transparent; border:none; padding:0; line-height:0; }
/* Las imágenes se ven COMPLETAS (contain), no recortadas */
.dgp-landing .img-ph img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:inherit; }
/* El hero y la imagen única de campings sí rellenan (cover) */
.dgp-landing .dgp-slide img,
.dgp-landing .dgp-hero-single img{ object-fit:cover; }
.dgp-landing .img-ph:not([style*="width:"]){ position:absolute; inset:0; width:100%; height:100%; }
.dgp-landing [style*="position:relative"]:has(> .img-ph){ overflow:hidden; }
.dgp-landing .img-ph[style*="border-radius:12px"],
.dgp-landing .img-ph[style*="border-radius:12px"] img{ border-radius:0 !important; }

/* --- Hero: carrusel --- */
.dgp-landing .hero-media{
  position:relative; height:600px; padding-bottom:34px;
  background:transparent; border-radius:20px;
}
.dgp-landing .dgp-hero-slider{ position:absolute; inset:0 0 34px 0; }
.dgp-landing .dgp-slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; border-radius:20px; overflow:hidden; }
.dgp-landing .dgp-slide.is-active{ opacity:1; }
.dgp-landing .dgp-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.dgp-landing .dgp-hero-dots{
  position:absolute; bottom:0; left:0; right:0; z-index:5;
  display:flex; justify-content:center; align-items:center; gap:10px; height:34px;
}
.dgp-landing .dgp-hero-dot{
  width:10px; height:10px; border-radius:50%; border:none; padding:0;
  cursor:pointer; background:#D1D5DB; transition:background .2s ease;
}
.dgp-landing .dgp-hero-dot.active{ background:#305CCC; }

/* Campings: imagen única, sin puntos */
.dgp-campings .hero-media{ padding-bottom:0; }
.dgp-landing .dgp-hero-single{ position:absolute; inset:0; border-radius:20px; overflow:hidden; }
.dgp-landing .dgp-hero-single img{ width:100%; height:100%; object-fit:cover; display:block; }

/* --- Redes y noticias (base en línea) --- */
.dgp-landing .dgp-social:hover{ transform:translateY(-2px); }
.dgp-landing .dgp-news-card:hover{ border-color:#305CCC !important; box-shadow:0 6px 18px rgba(48,92,204,.08); }

/* --- Bloque 01: imagen primero --- */
.dgp-landing .dgp-inc-01 > div:first-child{ order:2; }
.dgp-landing .dgp-inc-01 > div:last-child{ order:1; }

/* --- Otros --- */

.dgp-landing .dgp-badge-nuevo{ display:inline-block; flex:0 0 auto; white-space:nowrap; line-height:1.4; }
.dgp-landing details > summary{ flex-wrap:wrap; }

/* --- Formulario de alta --- */
.dgp-landing .dgp-input{
  width:100%; border:1px solid #DCDDE0; border-radius:10px;
  padding:16px 18px; font-size:17px; font-family:inherit; color:#111114;
  background:#fff; outline:none; transition:border-color .15s ease;
}
.dgp-landing .dgp-input::placeholder{ color:#9498A0; }
.dgp-landing .dgp-input:focus{ border-color:#305CCC; }
.dgp-landing .dgp-submit{ cursor:pointer; }
.dgp-landing .dgp-submit:hover{ background:#244497 !important; }
.dgp-landing .dgp-submit[disabled]{ opacity:.7; cursor:default; }
.dgp-landing .dgp-msg{ font-size:14px; margin-top:10px; }
.dgp-landing .dgp-msg.err{ color:#C0392B; }

/* ===================================================================
   4. RESPONSIVE
   =================================================================== */

/* ---------- TABLET HORIZONTAL (<=1024px) ---------- */
@media (max-width:1024px){
  .dgp-landing .r-pad{ padding-left:40px !important; padding-right:40px !important; }
  .dgp-landing .dgp-nota{ padding-left:40px !important; padding-right:40px !important; }
    .dgp-landing .dgp-news-wrap{ padding:56px 40px 44px !important; }

  .dgp-landing .r-grid2,
  .dgp-landing .r-gridauto,
  .dgp-landing .dgp-inc-01,
  .dgp-landing [style*="grid-template-columns:1fr 1fr"],
  .dgp-landing [style*="grid-template-columns:1fr 1.1fr"],
  .dgp-landing [style*="grid-template-columns:1fr 0.9fr"],
  .dgp-landing [style*="grid-template-columns:1.05fr"],
  .dgp-landing [style*="grid-template-columns:0.95fr"],
  .dgp-landing [style*="grid-template-columns:1fr auto"]{ grid-template-columns:1fr !important; }

  .dgp-landing .r-grid3,
  .dgp-landing .r-grid4,
  .dgp-landing .dgp-news-grid,
  .dgp-landing [style*="grid-template-columns:repeat(3"],
  .dgp-landing [style*="grid-template-columns:repeat(4"]{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }

  .dgp-landing .r-flex{ flex-wrap:wrap; }

  .dgp-landing .r-fs-xxl{ font-size:44px !important; line-height:1.1 !important; }
  .dgp-landing .r-fs-xl{ font-size:32px !important; line-height:1.2 !important; }
  .dgp-landing .r-fs-lg{ font-size:22px !important; }

  .dgp-landing .hero-media{ height:420px !important; }

  .dgp-landing .dgp-social img{ width:54px !important; height:54px !important; }
  .dgp-landing .dgp-social span{ font-size:13.5px !important; }

  .dgp-landing [style*="gap:56px"],
  .dgp-landing [style*="gap:48px"]{ gap:32px !important; }
}

/* ---------- TABLET VERTICAL (<=768px) ---------- */
@media (max-width:768px){
  .dgp-landing .r-grid3,
  .dgp-landing .dgp-news-grid,
  .dgp-landing [style*="grid-template-columns:repeat(3"]{ grid-template-columns:1fr !important; }

  .dgp-landing .r-grid4,
  .dgp-landing [style*="grid-template-columns:repeat(4"]{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:26px 16px !important;
  }

  .dgp-landing .dgp-news-top{ flex-direction:column !important; align-items:flex-start !important; gap:20px !important; }
  .dgp-landing .dgp-news-logos{ gap:24px !important; }
  .dgp-landing .dgp-news-logo img{ max-height:28px !important; }

  .dgp-landing .hero-media{ height:340px !important; padding-bottom:30px; }
  .dgp-landing .dgp-hero-slider{ inset:0 0 30px 0; }
  .dgp-landing .dgp-hero-dots{ height:30px; }

  .dgp-landing .dgp-linkqr{ grid-template-columns:1fr !important; }
  .dgp-landing .dgp-linkqr > div{ padding:18px 0 !important; border-left:none !important; border-top:1px solid #DCDDE0; }
  .dgp-landing .dgp-linkqr > div:first-child{ border-top:none; }

  .dgp-landing details > summary{ align-items:flex-start !important; gap:10px !important; }
  .dgp-landing .dgp-badge-nuevo{ margin-bottom:6px; }

  /* Redes: 3 por fila, se leen mejor que 5 apretadas */
  .dgp-landing .dgp-socials{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:24px 12px !important; }
}

/* ---------- MÓVIL (<=520px) ---------- */
@media (max-width:520px){
  .dgp-landing .r-pad{ padding-left:20px !important; padding-right:20px !important; }
  .dgp-landing .dgp-nota{ padding-left:20px !important; padding-right:20px !important; }
    .dgp-landing .dgp-news-wrap{ padding:40px 20px 32px !important; }
  .dgp-landing .dgp-cifras{ padding:40px 20px !important; }
  .dgp-landing [style*="padding:84px"],
  .dgp-landing [style*="padding:76px"],
  .dgp-landing [style*="padding:72px"]{ padding-top:44px !important; padding-bottom:44px !important; }
  .dgp-landing [style*="gap:56px"],
  .dgp-landing [style*="gap:48px"],
  .dgp-landing [style*="gap:40px"]{ gap:24px !important; }

  .dgp-landing .r-fs-xxl{ font-size:32px !important; line-height:1.12 !important; letter-spacing:-.02em !important; }
  .dgp-landing .r-fs-xl{ font-size:26px !important; line-height:1.2 !important; }
  .dgp-landing .r-fs-lg{ font-size:20px !important; }
  .dgp-landing .r-fs-md{ font-size:16px !important; }

  .dgp-landing .hero-media{ height:260px !important; }

  .dgp-landing .dgp-socials{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:22px 8px !important; }
  .dgp-landing .dgp-social{ gap:10px !important; }
  .dgp-landing .dgp-social img{ width:46px !important; height:46px !important; }
  .dgp-landing .dgp-social span{ font-size:12px !important; }

  .dgp-landing .dgp-cifras .r-fs-xxl{ font-size:30px !important; }

  .dgp-landing a[style*="border-radius:10px"]:not(.dgp-topbar-cta),
  .dgp-landing a[style*="border-radius:12px"]:not(.dgp-topbar-cta){
    display:block !important; width:100% !important; text-align:center !important; margin-left:0 !important;
  }

  .dgp-landing [style*="text-align:right"]{ text-align:left !important; }

  .dgp-landing input,
  .dgp-landing select,
  .dgp-landing textarea{ width:100% !important; font-size:16px !important; }

  .dgp-landing .dgp-news-card{ padding:22px 20px !important; }
  .dgp-landing .dgp-news-logo img{ max-height:24px !important; }
}

/* ---------- MÓVIL ESTRECHO (<=380px) ---------- */
@media (max-width:380px){
  .dgp-landing .r-fs-xxl{ font-size:27px !important; }
  .dgp-landing .r-fs-xl{ font-size:22px !important; }
  .dgp-landing .dgp-socials{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .dgp-landing .dgp-cifras .r-fs-xxl{ font-size:26px !important; }
}

/* Alturas de imagen más contenidas en pantallas pequeñas */
@media (max-width:768px){
  .dgp-landing [style*="height:260px"]{ height:200px !important; }
}
@media (max-width:520px){
  .dgp-landing [style*="height:260px"]{ height:170px !important; }
}

/* ===== Redes dentro del bloque gris (fila "SÍGUENOS") ===== */
.dgp-landing .dgp-social:hover{ color:#244497; }
.dgp-landing .dgp-social:hover img{ transform:scale(1.08); }
.dgp-landing .dgp-social img{ transition:transform .15s ease; }

/* ===== Noticias: color activo igual que el hover ===== */
.dgp-landing .dgp-news-card:hover,
.dgp-landing .dgp-news-card:focus,
.dgp-landing .dgp-news-card:active{
  border-color:#305CCC !important;
  background:#EEF2FC !important;
  box-shadow:0 6px 18px rgba(48,92,204,.08);
}

/* ===== Logos de prensa: todos a la misma altura ===== */
.dgp-landing .dgp-news-logo{ height:46px; display:flex; align-items:center; }
.dgp-landing .dgp-news-logo img{ max-height:34px !important; width:auto !important; object-fit:contain; }

@media (max-width:768px){
  .dgp-landing .dgp-socials{ gap:12px 18px !important; }
  .dgp-landing .dgp-social{ font-size:14px !important; }
  .dgp-landing .dgp-social img{ width:24px !important; height:24px !important; flex:0 0 24px !important; }
}
@media (max-width:520px){
  .dgp-landing .dgp-socials{ gap:12px 14px !important; margin-top:24px !important; padding-top:20px !important; }
  .dgp-landing .dgp-socials-label{ width:100%; margin-bottom:2px; }
  .dgp-landing .dgp-social{ font-size:13.5px !important; }

  /* "Cómo funciona": una sola columna en móvil */
  .dgp-landing .r-grid4,
  .dgp-landing [style*="grid-template-columns:repeat(4"]{
    grid-template-columns:1fr !important; gap:22px !important;
  }
}

/* Con object-fit:contain el fondo del contenedor se vería alrededor:
   lo ponemos en blanco para que la imagen se integre. */
.dgp-landing [style*="height:260px"][style*="background:#EAEAEC"]{
  background:#fff !important;
}
/* La foto de Myriam y los avatares sí recortan en círculo */
.dgp-landing .img-ph[style*="border-radius:50%"] img{ object-fit:cover; }

/* ===================================================================
   IMÁGENES: que se vean COMPLETAS y sin fondo gris alrededor
   =================================================================== */

/* 1) Hero: la imagen se ve entera (no recortada) y el alto se adapta a ella */
.dgp-landing .hero-media{ height:auto !important; }
.dgp-landing .dgp-hero-slider{ position:relative !important; inset:auto !important; }
.dgp-landing .dgp-slide{ position:absolute; }
.dgp-landing .dgp-slide.is-active{ position:relative; }
.dgp-landing .dgp-slide img,
.dgp-landing .dgp-hero-single img{
  width:100%; height:auto !important; object-fit:contain !important; border-radius:20px;
}
.dgp-landing .dgp-hero-single{ position:relative !important; inset:auto !important; }

/* 2) Bloque 01 y tarjetas: el contenedor se ajusta a la imagen, sin gris */
.dgp-landing [style*="min-height:520px"],
.dgp-landing [style*="height:260px"]{
  min-height:0 !important; height:auto !important; background:transparent !important;
}
.dgp-landing [style*="min-height:520px"] > .img-ph,
.dgp-landing [style*="height:260px"] > .img-ph{
  position:relative !important; inset:auto !important; height:auto !important;
}
.dgp-landing .img-ph:not([style*="width:"]) img{ height:auto !important; }

/* 3) Logos de prensa: mismo peso visual pese a proporciones distintas */
.dgp-landing .dgp-news-logo{ height:44px; }
.dgp-landing .dgp-news-logo img{ max-height:100% !important; max-width:150px !important; }
.dgp-landing .dgp-news-logo img[alt="La Sexta"]{ max-height:44px !important; }
.dgp-landing .dgp-news-logo img[alt="La Razón"]{ max-height:26px !important; }
.dgp-landing .dgp-news-logo img[alt="okdiario"]{ max-height:30px !important; }

@media (max-width:520px){
  .dgp-landing .dgp-news-logo{ height:34px; }
  .dgp-landing .dgp-news-logo img[alt="La Sexta"]{ max-height:34px !important; }
  .dgp-landing .dgp-news-logo img[alt="La Razón"]{ max-height:20px !important; }
  .dgp-landing .dgp-news-logo img[alt="okdiario"]{ max-height:24px !important; }
}

/* ===================================================================
   MÓVIL: alineación uniforme y cifras centradas
   =================================================================== */
@media (max-width:520px){

  /* Las cajas interiores (nota personal, tarjetas, bloque de Celia) suman su
     propio padding al de la sección y el texto quedaba desplazado.
     Se extienden hasta el borde de la sección para que TODO empiece en 20px. */
  .dgp-landing .dgp-nota > div,
  .dgp-landing .dgp-news-card,
  .dgp-landing [style*="padding:40px 38px"],
  .dgp-landing [style*="padding:44px 42px"],
  .dgp-landing [style*="padding:44px 48px"]{
    margin-left:-20px !important;
    margin-right:-20px !important;
    padding-left:20px !important;
    padding-right:20px !important;
    border-radius:0 !important;
  }
  /* La nota personal conserva su franja azul a la izquierda */
  .dgp-landing .dgp-nota > div{ border-left-width:4px !important; padding-left:16px !important; }

  /* Cifras de la comunidad: centradas */
  .dgp-landing .dgp-cifras{ text-align:center !important; }
  .dgp-landing .dgp-cifras .r-grid4,
  .dgp-landing .dgp-cifras [style*="grid-template-columns:repeat(4"]{
    justify-items:center !important;
  }
  .dgp-landing .dgp-cifras .r-grid4 > div{ text-align:center !important; }
  .dgp-landing .dgp-socials{ justify-content:center !important; }
}

/* ===== "Pagas solo la guía": caja-enlace con el precio a la derecha ===== */
.dgp-landing .dgp-guia-box{
  transition:background .15s ease, transform .15s ease;
}
.dgp-landing .dgp-guia-box:hover{ background:#C8D6F3 !important; }
.dgp-landing .dgp-guia-box:active{ transform:scale(.995); }

@media (max-width:768px){
  .dgp-landing .dgp-guia-box{ padding:20px 22px !important; }
  .dgp-landing .dgp-guia-txt{ font-size:17px !important; }
  .dgp-landing .dgp-guia-precio{ font-size:32px !important; }
}
@media (max-width:520px){
  /* En móvil se apila y se centra: en una línea quedaría muy apretado */
  .dgp-landing .dgp-guia-box{
    flex-direction:column !important; align-items:center !important;
    text-align:center; gap:6px !important; padding:20px !important;
  }
  .dgp-landing .dgp-guia-txt{ font-size:16px !important; }
  .dgp-landing .dgp-guia-precio{ font-size:30px !important; }
}

/* ===== Bloque 01: la imagen ocupa toda la altura de la columna de texto =====
   Antes la imagen se quedaba corta y dejaba un hueco blanco debajo. */
@media (min-width:1025px){
  .dgp-landing .dgp-inc-01{ align-items:stretch !important; }
  .dgp-landing .dgp-inc-01 > div{ height:auto; }
  /* La columna de la imagen se estira y la imagen rellena sin deformarse */
  .dgp-landing .dgp-inc-01 [style*="min-height:520px"]{
    min-height:100% !important; height:auto !important; align-self:stretch;
  }
  .dgp-landing .dgp-inc-01 [style*="min-height:520px"] > .img-ph{
    position:absolute !important; inset:0 !important; height:100% !important;
  }
  .dgp-landing .dgp-inc-01 [style*="min-height:520px"] > .img-ph img{
    height:100% !important; object-fit:cover !important;
  }
  /* Menos padding vertical en la columna de texto para ajustar mejor */
  .dgp-landing .dgp-inc-01 [style*="padding:52px 48px"]{
    padding-top:44px !important; padding-bottom:44px !important;
  }
}

/* ===== Tarjeta 03: fondo celeste con la imagen completa encima ===== */
.dgp-landing .dgp-img-03{ background:#C8D6F3 !important; }
.dgp-landing .dgp-img-03 > .img-ph{ background:transparent !important; }
.dgp-landing .dgp-img-03 > .img-ph img{ object-fit:contain !important; }

/* El logo del header es un enlace: mismo aspecto, sin subrayado ni cambio de color */
.dgp-landing a[href="/"].r-fs-lg{ text-decoration:none !important; color:#305CCC !important; display:inline-block; }
.dgp-landing a[href="/"].r-fs-lg:hover{ color:#244497 !important; opacity:1; }

/* ===================================================================
   MODAL DE VÍDEO
   =================================================================== */
.dgp-landing .dgp-video-trigger{ cursor:pointer; }

/* Icono de play sobre la imagen para indicar que es un vídeo */
/* Solo el slide activo está en el flujo; el resto apilados encima (absolute) */
.dgp-landing .dgp-hero-single{ position:relative; }
.dgp-landing .dgp-slide{ position:absolute; top:0; left:0; width:100%; }
.dgp-landing .dgp-slide.is-active{ position:relative; }
.dgp-landing .dgp-slide::after,
.dgp-landing .dgp-hero-single::after{
  content:""; position:absolute; top:50%; left:50%;
  width:72px; height:72px; margin:-36px 0 0 -36px;
  border-radius:50%; background:rgba(255,255,255,.92);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23305CCC'%3E%3Cpath d='M8 5.14v13.72a1 1 0 0 0 1.54.84l10.3-6.86a1 1 0 0 0 0-1.68L9.54 4.3A1 1 0 0 0 8 5.14Z'/%3E%3C/svg%3E");
  background-size:34px; background-position:calc(50% + 3px) 50%; background-repeat:no-repeat;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  pointer-events:none; transition:transform .15s ease;
}
.dgp-landing .dgp-slide:hover::after,
.dgp-landing .dgp-hero-single:hover::after{ transform:scale(1.06); }

/* Fondo oscurecido */
.dgp-video-modal{
  position:fixed; inset:0; z-index:99999;
  background:rgba(0,0,0,.72);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:dgpFade .2s ease;
}
.dgp-video-modal[hidden]{ display:none; }
@keyframes dgpFade{ from{opacity:0} to{opacity:1} }

/* Caja del vídeo */
.dgp-video-box{
  position:relative; width:100%; max-width:960px;
  background:#000; border-radius:16px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.dgp-video-box video{
  display:block; width:100%; height:auto; max-height:85vh; background:#000;
}
.dgp-video-close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:40px; height:40px; border:none; border-radius:50%;
  background:rgba(255,255,255,.92); color:#111; font-size:26px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.dgp-video-close:hover{ background:#fff; }

@media (max-width:520px){
  .dgp-video-modal{ padding:12px; }
  .dgp-video-box{ border-radius:12px; }
  .dgp-landing .dgp-slide::after,
  .dgp-landing .dgp-hero-single::after{ width:56px; height:56px; margin:-28px 0 0 -28px; background-size:26px; }
}