/* ==========================================================
   DE PLAYA Y MÁS · V15 MODULAR
   Sistema visual unificado
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --tide:#0C5A78; --tide-dark:#08465D; --water:#3DBFD6; --water-light:#7EDAE8;
  --feature-link:#A34A4A; --feature-link-dark:#7F3535;
  --sand:#F7F3EA; --shell:#FFFFFF; --ochre:#C79A5B; --ochre-dark:#9C713D;
  --ink:#1F2937; --ink-soft:#64727A; --line:#E2E8EA;
  --shadow-soft:0 10px 30px rgba(8,70,93,.08); --shadow-medium:0 18px 44px rgba(8,70,93,.14);
  --radius-sm:8px; --radius:16px; --radius-lg:24px; --container:1160px;
  --transition:.25s ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FCFDFC;color:var(--ink);font-family:'Public Sans',sans-serif;line-height:1.6}
img{max-width:100%} a{color:inherit;text-decoration:none}
.wrap{width:min(calc(100% - 48px),var(--container));margin-inline:auto}

/* HEADER */
.site-header{position:sticky;top:14px;z-index:100;width:min(calc(100% - 28px),1240px);margin:14px auto 0;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:1px solid rgba(12,90,120,.10);border-radius:22px;box-shadow:var(--shadow-soft)}
.header-container{min-height:78px;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand-mark{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:1.35rem;font-weight:600;color:var(--tide);white-space:nowrap}
.brand-mark .brand-dot{width:11px;height:11px;border-radius:50%;background:var(--water);box-shadow:0 0 0 5px rgba(61,191,214,.12)}
.main-nav{display:flex;align-items:center}
.menu{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.menu a{position:relative;display:inline-block;padding:8px 0;color:var(--ink);font-size:.94rem;font-weight:600}
.menu a::after{content:"";position:absolute;left:0;bottom:1px;width:0;height:3px;background:var(--water);border-radius:99px;transition:width var(--transition)}
.menu a:hover,.menu a.active{color:var(--tide)} .menu a:hover::after,.menu a.active::after{width:100%}
.menu-toggle{display:none;border:0;background:transparent;width:44px;height:44px;border-radius:12px;cursor:pointer}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--tide);margin:5px auto;border-radius:3px}

/* TYPE */
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ochre-dark);margin:0}
h1,h2,h3{font-family:'Fraunces',serif;line-height:1.15;margin:0;color:var(--tide)}
.section{padding:70px 0}.section-head{max-width:56ch;margin-bottom:38px}.section-head h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-top:8px}

/* HERO */
.hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,70,93,.82) 0%,rgba(8,70,93,.45) 48%,rgba(8,70,93,.08) 100%)}
.hero-content{position:relative;z-index:1;padding:64px clamp(24px,6vw,80px) 60px;max-width:700px;color:#fff}.hero-content .eyebrow{color:#DDEBE8}.hero h1{font-size:clamp(2.1rem,4vw,3.15rem);color:#fff;margin-top:12px;max-width:18ch}.hero .lede{font-size:1.08rem;line-height:1.75;max-width:58ch;color:#F0F6F5;margin:22px 0 28px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 19px;border-radius:999px;font-weight:700;transition:transform var(--transition),background var(--transition),color var(--transition)}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--water);color:#063B4C}.btn-primary:hover{background:var(--water-light)}.btn-ghost{border:1px solid rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.08)}.btn-ghost:hover{background:rgba(255,255,255,.16)}
.tideline{display:block;width:100%;height:46px;margin:16px auto 0}

/* GUIDE CARDS */
.guides-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.guide-card{background:var(--shell);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 16px rgba(8,70,93,.035);transition:transform var(--transition),box-shadow var(--transition)}.guide-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}.guide-card>a{display:flex;height:100%;flex-direction:column}.guide-thumb{height:150px;overflow:hidden;background:#e9eeee}.guide-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}.guide-card:hover .guide-thumb img{transform:scale(1.035)}.guide-body{padding:20px 20px 22px}.guide-body h3{font-size:1.15rem;margin-top:9px}.guide-body p{font-size:.92rem;color:var(--ink-soft);margin:10px 0 0}.meta{font-family:'IBM Plex Mono',monospace;font-size:.69rem;color:var(--ink-soft);margin-top:16px;display:flex;gap:10px}

/* CATEGORIES */
.tags-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:34px 26px}.tag-card{background:var(--shell);border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px 22px;box-shadow:0 4px 16px rgba(8,70,93,.035);transition:transform var(--transition),box-shadow var(--transition)}.tag-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}.cat-thumb{height:110px;border-radius:12px;overflow:hidden}.cat-thumb img{width:100%;height:100%;object-fit:cover;display:block}.tag-card h3{font-size:1.08rem;margin:14px 8px 0}.tag-card p{font-size:.9rem;color:var(--ink-soft);margin:7px 8px 0}.tag-card .see{display:inline-block;margin:14px 8px 0;font-family:'IBM Plex Mono',monospace;font-size:.69rem;letter-spacing:.05em;text-transform:uppercase;color:var(--feature-link);border-bottom:1px solid currentColor}

/* NEWSLETTER / FEATURE */
.newsletter{margin:10px 0 70px;background:var(--tide);color:#fff;border-radius:24px;padding:48px;display:flex;justify-content:space-between;align-items:center;gap:30px}.newsletter h2{color:#fff;font-size:clamp(1.8rem,3vw,2.5rem);max-width:22ch}.newsletter p{color:#D5E3E0;max-width:52ch}.sub-form{display:flex;gap:10px;flex-wrap:wrap}.sub-form input{padding:13px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;min-width:230px}.sub-form input::placeholder{color:#B6C8C5}

/* FOOTER */
footer{background:var(--tide-dark);color:#CFE0DD;margin-top:50px}.footer-inner{padding:52px 0 30px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:45px}.footer-brand{font-family:'Fraunces',serif;font-size:1.4rem;color:#fff}.footer-brand .brand-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--water);margin-right:8px}.footer-inner h4{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0 0 14px}.footer-inner p{font-size:.88rem;line-height:1.7;max-width:42ch;color:#AFC5C0}.footer-inner ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}.footer-inner a:hover{color:#fff}.afiliado-aviso{text-align:center;font-size:.75rem;line-height:1.6;color:#8FA9A4;max-width:70ch;margin:0 auto;padding:0 20px 18px}.bottom-bar{border-top:1px solid rgba(255,255,255,.12);padding:17px 20px;text-align:center;font-size:.74rem;color:#819A95}

/* INNER PAGES */
.page-hero{padding:62px 0 34px}.breadcrumb{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ink-soft);margin-bottom:15px}.breadcrumb a{color:var(--ochre-dark)}.page-hero h1{font-size:clamp(2.2rem,5vw,4rem);max-width:22ch}.page-hero p.lede{margin-top:14px;color:var(--ink-soft);font-size:1.03rem;max-width:68ch}.article-meta{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ink-soft);display:flex;gap:12px;margin-top:16px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px;padding:28px 0 65px}.product-card{background:var(--shell);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 16px rgba(8,70,93,.035)}.product-thumb{height:210px;overflow:hidden;background:#EEF2F2}.product-thumb img{width:100%;height:100%;object-fit:contain;display:block}.product-body{padding:20px;display:flex;flex-direction:column;flex:1}.product-pick{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tide);border:1px solid var(--water);border-radius:999px;padding:3px 9px;margin-bottom:11px;width:fit-content}.product-body h3{font-size:1.18rem}.product-body p{font-size:.9rem;color:var(--ink-soft);margin:10px 0 0;line-height:1.6;flex:1}.product-buy{margin-top:16px;display:inline-flex;align-items:center;justify-content:center;background:var(--ochre);color:#fff;padding:11px 18px;border-radius:999px;font-weight:700;font-size:.87rem}.product-buy:hover{background:var(--ochre-dark)}.product-note{font-size:.72rem!important;color:var(--ink-soft);margin-top:9px!important;display:flex;gap:6px}.disclosure-bar{font-size:.8rem;color:var(--ink-soft);background:var(--sand);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-bottom:20px}
.article-layout{display:grid;grid-template-columns:minmax(0,760px);justify-content:center}.article-hero{width:100%;height:360px;object-fit:cover;border-radius:22px;margin:10px 0 34px}.article-body{padding:0 0 25px}.article-body h2{color:var(--tide);font-size:1.65rem;margin-top:40px;margin-bottom:12px}.article-body p{color:var(--ink-soft);line-height:1.75;margin-top:14px;font-size:1rem}.article-body ul{color:var(--ink-soft)}.directions-list{padding-left:20px;margin:18px 0 0}.directions-list li{font-size:.95rem;line-height:1.65;margin:9px 0}
.trip-card{background:var(--shell);border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin-bottom:40px}.trip-card h2{color:var(--tide);font-size:1.7rem}.trip-meta{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--ink-soft);margin-top:8px}.trip-images{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}.trip-images img{width:100%;height:260px;object-fit:cover;border-radius:12px}.trip-video,.map-frame{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;margin-top:22px;border:1px solid var(--line)}.trip-video iframe,.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.guide-quote{margin-top:24px;padding:20px 22px;border-left:3px solid var(--ochre);background:var(--sand);border-radius:0 10px 10px 0}.guide-quote p{color:var(--ink);font-style:italic;line-height:1.7;margin:0;font-size:1rem}.guide-quote span{display:block;margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.aff-banner{background:var(--ochre);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:.72rem;text-align:center;padding:8px 16px}.aff-banner strong{font-weight:700}

@media(max-width:980px){.menu{gap:20px}.guides-grid{grid-template-columns:repeat(2,1fr)}.tags-grid{grid-template-columns:repeat(3,1fr)}.footer-inner{grid-template-columns:1fr 1fr}.newsletter{align-items:flex-start;flex-direction:column}}
@media(max-width:720px){.site-header{top:8px;margin-top:8px}.header-container{min-height:68px;padding:10px 16px}.menu-toggle{display:block}.main-nav{position:absolute;top:calc(100% + 8px);left:0;right:0;display:none;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-medium);padding:10px}.main-nav.open{display:block}.menu{flex-direction:column;align-items:stretch;gap:0}.menu a{display:block;padding:12px 10px}.menu a::after{bottom:7px}.brand-mark{font-size:1.18rem}.wrap{width:min(calc(100% - 48px),var(--container))}.hero{min-height:70vh}.hero-overlay{background:linear-gradient(180deg,rgba(8,70,93,.25) 10%,rgba(8,70,93,.85) 90%)}.hero-content{padding:44px 24px 40px}.hero h1{font-size:clamp(2.1rem,10vw,3.2rem)}.guides-grid,.tags-grid{grid-template-columns:1fr}.newsletter{padding:34px 24px}.footer-inner{grid-template-columns:1fr}.page-hero{padding:44px 0 26px}.article-hero{height:260px;border-radius:16px}.product-grid{grid-template-columns:1fr}.trip-images{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}


/* ==========================================================
   DPYM · MÓDULO C
   Tarjetas de contenido y categorías
========================================================== */

/* Tarjetas de guías: lectura más clara y alturas equilibradas */
.guides-grid{
  align-items:stretch;
}

.guide-card{
  min-height:100%;
  background:var(--shell);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 4px 16px rgba(8,70,93,.035);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.guide-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-soft);
  border-color:rgba(12,90,120,.18);
}

.guide-card:focus-within{
  border-color:rgba(12,90,120,.35);
  box-shadow:0 0 0 3px rgba(61,191,214,.16), var(--shadow-soft);
}

.guide-thumb{
  height:170px;
  overflow:hidden;
  background:#e9eeee;
}

.guide-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}

.guide-card:hover .guide-thumb img{
  transform:scale(1.04);
}

.guide-body{
  padding:21px 21px 23px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.guide-body h3{
  font-size:1.12rem;
  line-height:1.32;
  margin-top:9px;
}

.guide-body p{
  font-size:.92rem;
  line-height:1.55;
  color:var(--ink-soft);
  margin:10px 0 0;
}

.guide-body .meta{
  margin-top:auto;
  padding-top:17px;
}

/* Etiquetas: más visibles, sin convertirlas en protagonistas */
.guide-body .eyebrow{
  margin-bottom:0;
}

/* Categorías */
.tags-grid{
  align-items:stretch;
}

.tag-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--shell);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px 21px;
  box-shadow:0 4px 16px rgba(8,70,93,.035);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.tag-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-soft);
  border-color:rgba(12,90,120,.18);
}

.tag-card:focus-visible{
  outline:3px solid rgba(61,191,214,.32);
  outline-offset:3px;
}

.cat-thumb{
  height:120px;
  border-radius:12px;
  overflow:hidden;
}

.cat-thumb img{
  transition:transform .5s ease;
}

.tag-card:hover .cat-thumb img{
  transform:scale(1.04);
}

.tag-card h3{
  font-size:1.06rem;
  line-height:1.3;
  margin:14px 8px 0;
}

.tag-card p{
  font-size:.9rem;
  line-height:1.5;
  color:var(--ink-soft);
  margin:7px 8px 0;
}

.tag-card .see{
  margin-top:auto;
  padding-top:14px;
}

/* Móvil: mantenemos la escala aprobada y solo damos más aire a las imágenes */
@media (max-width: 720px){
  .guide-thumb{height:155px}
  .guide-body{padding:19px 18px 21px}
  .cat-thumb{height:115px}
}


/* ==========================================================
   DPYM · MÓDULO D
   Categorías destacadas en portada
========================================================== */

.categories-featured{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.categories-featured .tag-card:nth-child(n+9){
  display:none;
}

.categories-more{
  display:flex;
  justify-content:center;
  margin-top:28px;
}

.categories-more .btn{
  min-width:220px;
  text-align:center;
}

@media (max-width: 980px){
  .categories-featured{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 720px){
  .categories-featured{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .categories-more{
    margin-top:24px;
  }
}

@media (max-width: 480px){
  .categories-featured{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   DPYM · MÓDULO E
   Footer
========================================================== */

.site-footer{
  margin-top:64px;
  background:var(--ink);
  color:#fff;
}

.footer-container{
  max-width:var(--max);
  margin:0 auto;
  padding:42px 24px 34px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
}

.footer-brand{
  max-width:430px;
}

.footer-logo{
  display:inline-block;
  color:#fff;
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.02em;
  text-decoration:none;
}

.footer-brand p{
  margin:10px 0 0;
  color:rgba(255,255,255,.76);
  line-height:1.55;
  font-size:.92rem;
}

.footer-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px 22px;
  padding-top:4px;
}

.footer-nav a{
  color:rgba(255,255,255,.9);
  text-decoration:none;
  font-size:.9rem;
  transition:color var(--transition);
}

.footer-nav a:hover,
.footer-nav a:focus-visible{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
}

.footer-bottom p{
  max-width:var(--max);
  margin:0 auto;
  padding:16px 24px;
  color:rgba(255,255,255,.62);
  font-size:.78rem;
  line-height:1.5;
}

@media (max-width:720px){
  .footer-container{
    padding:34px 20px 28px;
    flex-direction:column;
    gap:24px;
  }

  .footer-nav{
    justify-content:flex-start;
    gap:10px 18px;
  }

  .footer-bottom p{
    padding-left:20px;
    padding-right:20px;
  }
}


/* ==========================================================
   DPYM · MÓDULO F · NAVEGACIÓN VISIBLE
========================================================== */

.dpym-breadcrumbs{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 24px 2px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  font-size:.82rem;
  line-height:1.45;
  color:var(--ink-soft);
}

.dpym-breadcrumbs a{
  color:var(--ink-soft);
  text-decoration:none;
  font-weight:600;
}

.dpym-breadcrumbs a:hover,
.dpym-breadcrumbs a:focus-visible{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px;
}

.dpym-breadcrumbs span[aria-hidden="true"]{
  color:var(--line-strong);
  font-size:1rem;
}

.dpym-breadcrumb-current{
  color:var(--ink);
  font-weight:700;
}

/* Botón de regreso visible al final del encabezado de página */
.dpym-back-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:18px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-soft);
  background:var(--shell);
  text-decoration:none;
  font-size:.82rem;
  font-weight:700;
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.dpym-back-link:hover,
.dpym-back-link:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(12,90,120,.22);
  box-shadow:var(--shadow-soft);
  color:var(--ink);
}

@media (max-width:720px){
  .dpym-breadcrumbs{
    padding-left:20px;
    padding-right:20px;
    font-size:.78rem;
  }
}


/* ==========================================================
   DPYM · MÓDULO F · ESTADO ACTIVO DEL MENÚ
========================================================== */

.main-nav .menu a.active{
  color:var(--ink);
  font-weight:800;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:6px;
}

.main-nav .menu a.active:hover,
.main-nav .menu a.active:focus-visible{
  color:var(--ink);
}


/* DPYM · MÓDULO F · PÁGINAS REALES DE CATEGORÍAS Y GUÍAS */
.dpym-section-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:28px;
}
.dpym-section-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  box-shadow:var(--shadow-soft);
  transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.dpym-section-card:hover,
.dpym-section-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(12,90,120,.24);
  box-shadow:var(--shadow);
}
.dpym-section-card span:last-child{
  font-size:1.25rem;
  color:var(--tide);
}
@media(max-width:720px){
  .dpym-section-list{grid-template-columns:1fr;}
}

/* DPYM · MÓDULO F · NAVEGACIÓN PRINCIPAL DEFINITIVA */
.main-nav .menu a.active{
  color:var(--tide);
  font-weight:800;
  text-decoration:none;
}
.main-nav .menu a.active::after{
  width:100%;
}


/* ==========================================================
   DPYM · RESPONSIVE 15.1
   Primera entrega · Base responsive segura
========================================================== */

/* Evita desbordamientos horizontales en elementos flex/grid */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

.wrap{
  width:min(calc(100% - 48px),var(--container));
}

/* Tablets y pantallas medianas */
@media (max-width:980px){
  .site-header{
    width:calc(100% - 24px);
  }

  .header-container{
    padding-left:20px;
    padding-right:20px;
  }

  .menu{
    gap:18px;
  }

  .hero-content{
    max-width:620px;
    padding-left:clamp(24px,5vw,60px);
    padding-right:clamp(24px,5vw,60px);
  }

  .newsletter{
    margin-left:0;
    margin-right:0;
  }

  .article-layout{
    width:100%;
  }
}

/* Móviles */
@media (max-width:720px){
  .site-header{
    width:calc(100% - 16px);
    top:8px;
    margin-top:8px;
    border-radius:18px;
  }

  .header-container{
    min-height:64px;
    padding:8px 12px 8px 16px;
    gap:10px;
  }

  .brand-mark{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:1.08rem;
  }

  .main-nav{
    left:0;
    right:0;
    width:100%;
  }

  .hero{
    min-height:clamp(560px,78vh,700px);
  }

  .hero-content{
    width:100%;
    padding:42px 24px 36px;
  }

  .hero h1{
    max-width:15ch;
    font-size:clamp(2rem,9vw,2.8rem);
  }

  .hero .lede{
    font-size:1rem;
    line-height:1.65;
  }

  .cta-row{
    width:100%;
  }

  .cta-row .btn{
    min-height:46px;
  }

  .section{
    padding:52px 0;
  }

  .section-head{
    margin-bottom:28px;
  }

  .newsletter{
    padding:32px 22px;
    border-radius:20px;
  }

  .sub-form{
    width:100%;
  }

  .sub-form input{
    min-width:0;
    width:100%;
  }

  .sub-form .btn{
    width:100%;
  }

  .page-hero h1{
    font-size:clamp(2rem,9vw,3rem);
  }

  .article-hero{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
  }

  .product-grid{
    padding-top:18px;
  }

  .product-thumb{
    height:190px;
  }

  .trip-card{
    padding:22px 18px;
  }

  .trip-images img{
    height:auto;
    aspect-ratio:16/10;
  }

  .dpym-section-list{
    grid-template-columns:1fr;
  }
}

/* Móviles pequeños */
@media (max-width:480px){
  .wrap{
    width:calc(100% - 32px);
  }

  .header-container{
    padding-left:13px;
    padding-right:9px;
  }

  .brand-mark{
    font-size:1rem;
  }

  .brand-mark .brand-dot{
    width:9px;
    height:9px;
  }

  .hero{
    min-height:600px;
  }

  .hero-content{
    padding-left:16px;
    padding-right:16px;
  }

  .hero h1{
    font-size:clamp(1.9rem,10vw,2.45rem);
  }

  .hero .lede{
    font-size:.96rem;
  }

  .section{
    padding:44px 0;
  }

  .guide-body,
  .tag-card{
    padding-left:16px;
    padding-right:16px;
  }

  .newsletter{
    padding:28px 18px;
  }

  .footer-container{
    padding-left:16px;
    padding-right:16px;
  }

  .footer-bottom p{
    padding-left:16px;
    padding-right:16px;
  }
}

/* ==========================================================
   DPYM · RESPONSIVE 15.2
   Segunda entrega · Ajuste específico para horizontal
========================================================== */

/*
   En móviles y tablets en horizontal hay mucha anchura pero poca altura.
   No usamos una altura mínima rígida en el hero: dejamos que el contenido
   determine la altura y reducimos los espacios verticales.
*/
@media (orientation: landscape) and (max-width:1024px){
  .hero{
    min-height:clamp(430px,100svh,620px);
  }

  .hero-content{
    padding-top:34px;
    padding-bottom:30px;
  }

  .hero h1{
    font-size:clamp(1.9rem,5.2vw,2.8rem);
    max-width:20ch;
  }

  .hero .lede{
    margin-top:14px;
    margin-bottom:20px;
    font-size:.98rem;
    line-height:1.5;
  }

  .section{
    padding-top:48px;
    padding-bottom:48px;
  }
}

/* Móvil en horizontal: menú compacto y hero completo dentro de la pantalla */
@media (orientation: landscape) and (max-width:720px){
  .site-header{
    position:sticky;
  }

  .header-container{
    min-height:56px;
    padding-top:6px;
    padding-bottom:6px;
  }

  .hero{
    min-height:calc(100svh - 8px);
  }

  .hero-content{
    padding-top:30px;
    padding-bottom:26px;
  }

  .hero h1{
    font-size:clamp(1.8rem,6vw,2.45rem);
    margin-top:8px;
  }

  .hero .lede{
    max-width:62ch;
    margin-top:12px;
    margin-bottom:18px;
    font-size:.92rem;
    line-height:1.45;
  }

  .cta-row .btn{
    min-height:42px;
    padding-top:9px;
    padding-bottom:9px;
  }
}


/* ==========================================================
   DPYM · RESPONSIVE 15.3
   Tercera entrega · Horizontal real
========================================================== */

/*
   En orientación horizontal, especialmente en móviles y tablets,
   la altura disponible es mucho menor que en vertical.
   La versión anterior todavía imponía una altura mínima al hero.
   Eso podía hacer que el contenido inferior quedara recortado.

   En esta entrega el HERO deja de tener una altura mínima rígida
   en horizontal: su contenido determina su altura real.
   La imagen de fondo se adapta a esa altura sin recortar el texto
   ni los botones.
*/

@media (orientation: landscape) and (max-width:1024px){
  .hero{
    min-height:0;
    height:auto;
    align-items:flex-start;
  }

  .hero-content{
    max-width:760px;
    padding-top:34px;
    padding-bottom:34px;
  }

  .hero h1{
    max-width:22ch;
  }

  .hero .lede{
    max-width:68ch;
    margin-top:14px;
    margin-bottom:20px;
    line-height:1.5;
  }
}

/* Móvil horizontal: máxima prioridad a que TODO el contenido
   principal quede dentro de la pantalla. */
@media (orientation: landscape) and (max-width:720px){
  .hero{
    min-height:0;
    height:auto;
    align-items:flex-start;
  }

  .hero-content{
    max-width:100%;
    padding-top:24px;
    padding-bottom:24px;
  }

  .hero h1{
    max-width:24ch;
    font-size:clamp(1.65rem,5.8vw,2.25rem);
    line-height:1.12;
    margin-top:6px;
  }

  .hero .lede{
    max-width:70ch;
    font-size:.9rem;
    line-height:1.4;
    margin-top:10px;
    margin-bottom:16px;
  }

  .cta-row{
    gap:9px;
  }

  .cta-row .btn{
    min-height:40px;
    padding:8px 16px;
  }
}

/* ==========================================================
   DPYM · RESPONSIVE 15.4
   Cuarta entrega · Horizontal compacto real
========================================================== */

/*
   En horizontal el problema no es únicamente el tamaño del HERO.
   El navegador del móvil/tablet también deja menos altura útil al
   contenido cuando muestra sus barras. Por eso aquí trabajamos con
   la altura dinámica del viewport (dvh) y hacemos el HERO compacto.

   Objetivo: que la pantalla principal completa quepa en el espacio
   realmente disponible, sin alterar PC ni la vista vertical.
*/
@media (orientation: landscape) and (max-width:1024px){
  .hero{
    height:calc(100dvh - 58px);
    min-height:0;
    max-height:none;
    align-items:center;
  }

  .hero-content{
    width:100%;
    max-width:860px;
    padding:20px clamp(24px,5vw,56px);
  }

  .hero h1{
    font-size:clamp(1.65rem,4.4vw,2.55rem);
    line-height:1.08;
    max-width:24ch;
    margin-top:8px;
  }

  .hero .lede{
    font-size:clamp(.84rem,1.65vw,1rem);
    line-height:1.4;
    max-width:72ch;
    margin:11px 0 15px;
  }

  .cta-row{gap:9px}
  .cta-row .btn{
    min-height:38px;
    padding:8px 15px;
  }
}

/* Móvil 6,3" en horizontal: máxima compactación vertical. */
@media (orientation: landscape) and (max-width:720px){
  .site-header{
    top:4px;
    margin-top:4px;
  }

  .header-container{
    min-height:52px;
    padding-top:4px;
    padding-bottom:4px;
  }

  .hero{
    height:calc(100dvh - 56px);
    min-height:0;
    align-items:center;
  }

  .hero-content{
    padding:14px 18px 16px;
  }

  .hero h1{
    font-size:clamp(1.45rem,5vw,2rem);
    line-height:1.06;
    max-width:26ch;
    margin-top:6px;
  }

  .hero .lede{
    font-size:.82rem;
    line-height:1.32;
    margin:8px 0 12px;
    max-width:70ch;
  }

  .cta-row{gap:7px}

  .cta-row .btn{
    min-height:36px;
    padding:7px 13px;
    font-size:.84rem;
  }
}


/* ==========================================================
   DPYM · MÓDULO G3 · PLANTILLA COMÚN DE GUÍAS
   Primera aplicación: guias/index.html
========================================================== */

.dpym-guides-page{
  padding-top:56px;
  padding-inline:max(24px, calc((100vw - var(--container)) / 2));
}

.dpym-guides-heading{
  max-width:68ch;
  margin-bottom:38px;
}

.dpym-guides-heading h1{
  font-size:clamp(2.2rem,5vw,3.6rem);
  margin-top:8px;
}

.dpym-guides-heading > p:last-child{
  color:var(--ink-soft);
  font-size:1.03rem;
  line-height:1.7;
  margin-top:14px;
}

.dpym-guides-grid{
  margin-top:0;
}

.dpym-guides-grid .guide-card{
  min-height:100%;
}

.dpym-guides-grid .guide-body{
  display:flex;
  flex-direction:column;
  flex:1;
}

.dpym-guides-grid .guide-body h3{
  line-height:1.22;
}

.dpym-guides-grid .guide-body > p:not(.eyebrow){
  line-height:1.6;
}

.dpym-guides-grid .meta{
  margin-top:auto;
  padding-top:16px;
}

@media(max-width:720px){
  .dpym-guides-page{
    padding-top:42px;
  }

  .dpym-guides-heading{
    margin-bottom:28px;
  }

  .dpym-guides-grid{
    gap:20px;
  }
}


/* ==========================================================
   DPYM · MÓDULO G4 · PÁGINA PRINCIPAL DE CATEGORÍAS
   Misma familia visual que Inicio y G3 · Guías
========================================================== */

.dpym-categories-page{
  padding-top:56px;
  padding-inline:max(24px, calc((100vw - var(--container)) / 2));
}

.dpym-categories-heading{
  max-width:68ch;
  margin-bottom:38px;
}

.dpym-categories-heading h1{
  font-size:clamp(2.2rem,5vw,3.6rem);
  margin-top:8px;
}

.dpym-categories-heading > p:last-child{
  color:var(--ink-soft);
  font-size:1.03rem;
  line-height:1.7;
  margin-top:14px;
}

.dpym-categories-grid{
  margin-top:0;
}

.dpym-categories-grid .tag-card{
  height:100%;
  padding-bottom:22px;
}

.dpym-categories-grid .cat-thumb{
  height:150px;
}

.dpym-categories-grid .tag-card h3{
  line-height:1.25;
}

.dpym-categories-grid .tag-card p{
  line-height:1.55;
}

.dpym-categories-grid .tag-card .see{
  margin-top:16px;
}

@media(max-width:720px){
  .dpym-categories-page{
    padding-top:42px;
  }

  .dpym-categories-heading{
    margin-bottom:28px;
  }

  .dpym-categories-grid{
    gap:20px;
  }
}


/* ==========================================================
   DPYM · G6 · AJUSTE TABLET VERTICAL
   Evita recortes verticales en las imágenes de "Explorar contenido".
   Se aplica sólo a tablet en orientación vertical.
========================================================== */

@media (min-width:721px) and (max-width:980px) and (orientation:portrait){
  .guides-grid .guide-thumb{
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .guides-grid .guide-thumb img{
    object-fit:contain;
    background:#e9eeee;
  }
}


/* ==========================================================
   DPYM · G6.2 · IMAGEN COMPLETA EN "LO ÚLTIMO"
   Tablet vertical: eliminamos la altura fija del contenedor.
   La imagen conserva su proporción original y no se recorta.
========================================================== */

@media (min-width:721px) and (max-width:980px) and (orientation:portrait){
  .guides-grid .guide-thumb{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    overflow:hidden;
    display:block;
  }

  .guides-grid .guide-thumb img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:initial !important;
    display:block;
    transform:none !important;
  }
}


/* ==========================================================
   DPYM · G6.3 · TABLET VERTICAL · IMÁGENES SIN RECORTE
   Categorías + Guías + "Lo último que hemos añadido"

   En tablet vertical las tarjetas pasan a ocupar una sola
   columna. La imagen debe conservar su proporción original,
   sin ser forzada a una altura fija.
========================================================== */

@media (min-width:721px) and (max-width:980px) and (orientation:portrait){

  /* GUÍAS / LO ÚLTIMO */
  .guides-grid .guide-thumb{
    height:auto !important;
    aspect-ratio:auto !important;
    overflow:hidden;
  }

  .guides-grid .guide-thumb img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:initial !important;
    display:block;
  }

  /* CATEGORÍAS */
  .tags-grid .cat-thumb{
    height:auto !important;
    aspect-ratio:auto !important;
    overflow:hidden;
  }

  .tags-grid .cat-thumb img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:initial !important;
    display:block;
  }
}


/* ==========================================================
   DPYM · SOBRE MÍ
   Página personal integrada en la identidad V15
========================================================== */
.dpym-about-page{padding-top:34px}
.dpym-about-body{width:100%;max-width:760px;margin-inline:auto}
.dpym-about-heading{margin-bottom:28px}
.dpym-about-heading h1{font-size:clamp(2.35rem,5vw,3.7rem);margin-top:10px}
.dpym-about-heading .lede{color:var(--ink-soft);font-size:1.08rem;line-height:1.75;margin:18px 0 0;max-width:62ch}
.about-story{padding-top:0;margin-bottom:20px}
.about-story h2{font-size:clamp(1.55rem,3vw,2rem);margin-bottom:13px}
.about-story p{color:var(--ink-soft);line-height:1.55;margin:10px 0;font-size:1rem}
.about-quote{margin:18px 0;padding:20px 24px;border-left:4px solid var(--ochre);background:var(--sand);border-radius:0 14px 14px 0;color:var(--tide);font-family:'Fraunces',serif;font-size:1.2rem;line-height:1.5;font-style:italic}
.about-emphasis{color:var(--tide)!important;font-family:'Fraunces',serif;font-size:1.18rem!important;line-height:1.55!important}
.about-last{margin-bottom:10px}
.about-welcome{font-family:'Fraunces',serif!important;font-size:1.45rem!important;color:var(--tide)!important;margin-top:28px!important}
@media(max-width:720px){.dpym-about-page{padding-top:20px}.dpym-about-heading{margin-bottom:22px}.about-story{margin-bottom:18px}.about-quote{padding:16px 18px;font-size:1.1rem}}


/* ==========================================================
   DPYM · G8.1 · CÓMO ENCONTRAR EL CONTENIDO
   Explicación breve de Guías, Categorías y el "Y Más"
========================================================== */
.dpym-howto{
  padding-top:48px;
  padding-bottom:52px;
}
.dpym-howto .section-head{
  max-width:72ch;
  margin-bottom:28px;
}
.dpym-howto .section-head h2{
  max-width:28ch;
}
.dpym-howto-intro{
  color:var(--ink-soft);
  margin:14px 0 0;
  font-size:1rem;
  line-height:1.65;
}
.dpym-howto-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.dpym-howto-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  padding:24px;
  background:var(--shell);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 4px 16px rgba(8,70,93,.035);
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.dpym-howto-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-soft);
  border-color:rgba(61,191,214,.45);
}
.dpym-howto-number{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  color:var(--ochre-dark);
  padding-top:4px;
}
.dpym-howto-card h3{
  font-size:1.35rem;
  margin:0;
}
.dpym-howto-card p{
  color:var(--ink-soft);
  font-size:.93rem;
  line-height:1.55;
  margin:9px 0 13px;
}
.dpym-howto-card .see{
  color:var(--tide);
  font-size:.9rem;
  font-weight:700;
}
@media(max-width:980px){
  .dpym-howto-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .dpym-howto-card{
    padding:20px;
  }
}
@media(max-width:720px){
  .dpym-howto{
    padding-top:34px;
    padding-bottom:38px;
  }
  .dpym-howto .section-head{
    margin-bottom:22px;
  }
  .dpym-howto .section-head h2{
    max-width:30ch;
  }
  .dpym-howto-card{
    grid-template-columns:auto 1fr;
    gap:13px;
    padding:18px;
  }
}

/* ==========================================================
   G10.1 · Y MÁS — BLOQUE DE TEMAS
   ========================================================== */

.dpym-ymas-jump{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:1.35rem 0 0;padding:.9rem 1rem;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:rgba(255,255,255,.55);}
.dpym-ymas-jump span{font-weight:700;margin-right:.2rem;}
.dpym-ymas-jump a{display:inline-flex;align-items:center;padding:.38rem .7rem;border-radius:999px;text-decoration:none;background:rgba(0,0,0,.045);font-size:.92rem;}
.dpym-ymas-jump a:hover,.dpym-ymas-jump a:focus-visible{background:rgba(0,0,0,.09);text-decoration:none;}

.dpym-ymas-topics{grid-template-columns:repeat(2,minmax(0,1fr));}

@media (max-width: 720px){
  .dpym-ymas-topics{grid-template-columns:1fr;}
}

/* G10.3 — conexión entre Y Más y sus temas */
.dpym-ymas-return{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.25rem;padding:.8rem 1rem;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:rgba(255,255,255,.55);font-size:.9rem;}
.dpym-ymas-return span{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}
.dpym-ymas-return a{font-weight:700;text-decoration:none;}
.dpym-ymas-return a:hover,.dpym-ymas-return a:focus-visible{text-decoration:underline;}

/* Enlaces destacados hacia contenidos o productos relacionados */
.dpym-feature-link{
  color:var(--feature-link);
  font-weight:700;
  text-decoration:none;
}
.dpym-feature-link:hover,.dpym-feature-link:focus-visible{
  color:var(--feature-link-dark);
  text-decoration:underline;
  text-underline-offset:2px;
}
@media(max-width:600px){.dpym-ymas-return{align-items:flex-start;flex-direction:column;gap:.45rem;}}


/* DPYM Crece-14 · Fotografías de Viajes */
.dpym-photo{margin:24px 0 30px;}
.dpym-photo img{display:block;width:100%;border-radius:16px;object-fit:cover;}
.dpym-photo .article-hero{margin:0 0 8px;}
.dpym-photo figcaption{font-size:.72rem;line-height:1.5;color:var(--ink-soft);margin:0 4px;}


/* DPYM Crece-27 — todos los enlaces internos de contenido comparten el rojo destacado */
.see, .dpym-feature-link{
  color:var(--feature-link);
}
.see:hover, .see:focus-visible, .dpym-feature-link:hover, .dpym-feature-link:focus-visible{
  color:var(--feature-link-dark);
}


/* DPYM · Transparencia de afiliación Amazon */
.amazon-site-disclosure {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px 18px;
  color: rgba(255,255,255,.86);
  font-size: .82rem;
  line-height: 1.55;
}
.affiliate-ad-label {
  display: inline-block;
  margin: 6px 0 0 6px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: .76rem;
  line-height: 1.4;
  font-weight: 600;
  color: inherit;
}
.affiliate-policy-page h1 { margin-bottom: 18px; }
.affiliate-policy-page h2 { margin-top: 28px; }
.affiliate-policy-page p { line-height: 1.7; }
@media (max-width: 720px) {
  .amazon-site-disclosure { padding-left: 20px; padding-right: 20px; }
}


/* DPYM Crece-43: pie de página más compacto */
.site-footer .footer-container { padding-bottom: 18px; gap: 28px; }
.site-footer .footer-brand p { margin-top: 5px; }
.site-footer .footer-bottom p { margin: 0; padding-top: 7px; padding-bottom: 7px; line-height: 1.35; }
.site-footer .amazon-site-disclosure { padding-bottom: 4px; }
@media (max-width:720px) { .site-footer .footer-container { padding-bottom: 14px; gap: 18px; } .site-footer .footer-nav { gap: 7px 14px; } }


/* DPYM Crece-51 · Hogar: acceso visual a la comparativa de freidoras */
.hogar-comparison-card{
  display:grid;
  grid-template-columns:minmax(170px,230px) minmax(0,1fr);
  align-items:center;
  gap:clamp(22px,4vw,42px);
  max-width:900px;
  margin:24px auto 34px;
  padding:22px;
  background:var(--shell);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.hogar-comparison-image{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:260px;
  padding:8px;
  background:#F3F1EC;
  border-radius:var(--radius);
  overflow:hidden;
}
.hogar-comparison-image img{
  display:block;
  width:100%;
  max-height:330px;
  object-fit:contain;
  border-radius:10px;
  transition:transform var(--transition);
}
.hogar-comparison-image:hover img{transform:scale(1.025)}
.hogar-comparison-copy h2{
  margin:0 0 12px;
  color:var(--tide);
  font-family:'Fraunces',serif;
  font-size:clamp(1.35rem,2.5vw,1.8rem);
  line-height:1.25;
}
.hogar-comparison-copy p{color:var(--ink-soft);line-height:1.75;margin:0 0 16px}
.hogar-comparison-copy .dpym-feature-link{display:inline-block;margin-top:2px}
@media(max-width:620px){
  .hogar-comparison-card{grid-template-columns:1fr;gap:16px;padding:16px}
  .hogar-comparison-image{min-height:0}
  .hogar-comparison-image img{max-height:360px;width:auto;max-width:100%}
}