/* ============================================================
   LAYOUT — ESTRUCTURA, POSICIONAMIENTO, GRIDS, FLEX, BREAKPOINTS
   ============================================================ */


/* ------------------------------ */
/* BASE */
/* ------------------------------ */


/* SECCIÓN GENÉRICA MOBILE-FIRST 
.section {
  width: 100%;
  margin-top: var(--space-section-mobile);
  margin-bottom: var(--space-section-mobile);
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  box-sizing: border-box;
}


@media (min-width: 64rem) {
  .section {
    margin-top: var(--space-section-desktop);
    margin-bottom: var(--space-section-desktop);
    padding-left: var(--gutter-desktop);
    padding-right: var(--gutter-desktop);
  }
}*/

/*********** front page ****/

.front-page-content {
  margin:1rem;
}

@media (max-width: 768px) {
  .front-page-content {
    margin:0rem;
  }
}


#tarjetaregalo img {
    width:17rem;
}
/* ------------------------------ */
/* CONTENEDORES */
/* ------------------------------ */

.site-container {
  margin: 0 auto;
}

/*.site-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  box-sizing: border-box;
}


}*/
.full-container-margin {
  max-width: 128rem;
  margin: 0 auto;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}

/* Tablet */
@media (min-width: 48rem) { /* 480px */
  .full-container-margin {
    padding-left: var(--gutter-tablet);
    padding-right: var(--gutter-tablet);
  }
}


.full-container {
  max-width: 128rem;
  margin: 0 auto;
}

/* ------------------------------ */
/* 1. HEADER VISUAL + BRANDING
/* ------------------------------ */

.site-header { 
  position: fixed;
  top: 0;
  left: 0;
  padding:1rem;   
  width: -webkit-fill-available;
  width:-moz-available;
  
  max-width: 100%;
  height: 6rem;  
           
  background: var(--bg-header);
  display: flex;
  align-items: center;
  transition: all 1s ease; 
  z-index: 999;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  border-radius:1rem;
  
  justify-content: space-between;
  align-items:center;
  gap: 1rem;
}

.site-branding {
  display: flex !important;
  align-items: center !important;
}

.site-logo {
  display: block;
  height: 50px;
  width: auto;
}

.logo-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem;
  text-decoration: none;
}

.aquayi-title {
  font-family: var( --font-brand-title);
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  flex-direction: row;
  line-height: 1.3;
  gap: 5px;
  align-items: baseline;
  white-space: nowrap;
}

.aq-main {
  font-family: var( --font-brand-title);
  font-weight: 400;
  font-size: 3rem;
  line-height: 1;
}

.aq-sub {
  font-family: var( --font-brand-title);
  font-size: 1.7rem;
  line-height: 1;
}


/* Estado reducido */
.site-header.shrink {
  height: 40px;                        /* altura más pequeña */
  background: var(--bg-header);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}


.site-header.shrink  .site-logo {
  height:45px;     
  transition: all 1s ease;             
}
.site-header.shrink  .aq-main {
  font-size:2.5rem;  
  transition: all 1s ease;                 
}
.site-header.shrink  .aq-sub {
  font-size:1.4rem;  
  transition: all 1s ease;                   
}
 
.site-header.shrink  .quick-links {
  font-size:1.6rem;
  gap:1.3rem;    
  transition: all 1s ease;                
}
 





.quick-links a {
  color: var(--text-primary);
}
.quick-links a:hover {
  color: var(--accent);
}

.whatsapp-icon {
  color: var(--accent);
}
.whatsapp-icon:hover {
  opacity: .8;
}




.page-hero {
  position: relative;
  width: 100%;
  min-height: 23rem;
  max-height: 23rem;
  margin-top: 8rem;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 520px) {
  .page-hero {
      min-height: 18rem;
      max-height: 18rem;
  }
}

.page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 2;
}

.page-hero__inner {
  position: relative;
  z-index: 3;
  padding: 3rem 1rem;
  text-align: center;
  color: #fff;
}

.page-title {
  margin: 0;
  color: #fff;
  font-size: 2.8rem;
}


/*
.page-hero {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height:23rem;
  max-height: 23rem;
  margin-top:8rem;

}

@media (max-width: 520px) {
    .page-hero {
        min-height:18rem;
        max-height: 18rem;
    }

}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 2;
}

.page-title {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 2.8rem;
    text-align: center;
    margin: 0;
}
.page-hero__inner {
  position: relative;
  z-index: 3;
  padding: 3rem 1rem; 
  text-align: center;
  color: #fff;
}*/





/* ------------------------------ */
/* 5. MENÚ SUPERIOR */
/* ------------------------------ */

.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: nowrap;
}

.quick-links {
  display: flex;
  gap: 1.4rem;
  list-style: none;
  white-space: nowrap;
}

.quick-links a {
  text-decoration: none;
  font-weight: 500;
}

.nav-icons {
  gap:1.5rem;
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
}

.whatsapp-icon,
.menu-toggle {
  flex-shrink: 0;
}

.whatsapp-icon {
  display: flex;
  align-items: center;
}


/* ------------------------------ */
/* 6. DROPDOWN — ESTRUCTURA */
/* ------------------------------ */

.header-inner.full-container {
  position: relative;
}



/* ------------------------------ */
/* 7. SUBMENÚ — estructura */
/* ------------------------------ */

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease; /* transición estructural */
}

.has-submenu.open > .submenu {
  max-height: 400px;
}

.submenu li a {
  display: block;
  white-space: nowrap;
}


/* ------------------------------ */
/* 8. GRID SERVICIOS */
/* ------------------------------ */

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.servicio {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.servicio h3, .servicio p {
  margin-left:1rem;
  margin-right:1rem;
}


/* ------------------------------ */
/* PAGE BODY
/* ------------------------------ */

.page-content {
  margin-top:0rem;
  margin-bottom: 2rem;
}

.page-body {
    /*background: #faf8f5; /* suave, cálido, no llama la atención */
    padding: 2.5rem 2rem;
    
}

.page-body p {
    line-height: 1.7;
}


.page-body img {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-width: 100%;
    height: auto;
}

/*.page-hero {
    position: relative;
    width: 100%;
    height: 380px; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 21rem;
}*/

/* ancho estrecho reutilizable */
.wpnarrow {
  max-width: 780px;
  margin-inline: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* comportamiento alignfull para bloques */
.alignfull {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  box-sizing: border-box;
}

/* título */
.page-title {
  margin: 0;
  line-height: 1.1;
}

.page-body h2,
.page-body h3 {
    margin-top: 2.5rem;
}

@media (max-width: 520px) {
  .page-body { padding: 2.5rem 0.25rem;}
 }


/* ------------------------------ */
/* POST */
/* ------------------------------ */


 .post-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 1.5rem 0 2rem;
    font-size: 1.5rem;
    color: #444;
    flex-wrap:wrap;
}

.single-content article.img {
    max-width: 75%;
}

.post-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.meta-item.author {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* CLAVE */
  gap: 4px 6px;
}

.post-meta i {
    font-size: 2rem;
    color: #111;
}

/***---- img como hero------------------------*/
.single article figure {
    max-height: 600px;
    overflow: hidden;
    border-radius: 18px; /* <-- aquí! */
    display: block;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.single article figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: inherit; /* opcional, pero recomendable */
}
.single article figure.is-resized{
    height: auto;
}


/* WordPress a veces mete display:table en varias reglas. Matamos todas. */
figure.aligncenter,
.wp-block-image.aligncenter,
.wp-block-image .aligncenter,
.wp-block-image figure.aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/*------------------------------------------*/






.meta-separator::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
}

.related-posts {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.related-posts h2 {
    
    font-weight: 600;
}

.related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 520px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas máximo */
    }
}

.related-card {
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
}

.related-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}

.related-link:hover,
.related-link:focus {
    transform: translateY(-6px);
}

.related-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

.related-title {
    margin-top: 0.6rem;
    text-align: center;

    line-height: 1.2;
}

.breadcrumbs {
    margin: 1rem 0 1.5rem;
    font-size: 1.5rem;
    color: #444;
}
/* separador visual: línea muy sutil */
.breadcrumbs + .post-meta {
  border-top: 1px solid rgba(34,34,34,0.06);
  padding-top: 0.9rem;
  margin-top: 0.6rem;
}

.breadcrumbs a {
    color: inherit; /* usa el color global del enlace */
    text-decoration: underline; /* respeta tu estilo de enlaces */
}

.breadcrumbs a:hover {
    color: var(--link-hover-color, #000); /* o lo que uses */
}

.breadcrumbs-separator {
    margin: 0 6px;
    color: #999;
}

.breadcrumbs .current {
    color: #777;
    text-decoration: none;
}


/* ===========================
   BLOG — GRID C2 MINIMALISTA
   =========================== */

.blog-hero {
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

.blog-hero__title {
    font-size: 3rem;
    margin: 0;
    color: var(--text-primary);
}

/* GRID */
.blog-grid-container {
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.2rem;
}



@media (min-width: 600px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* CARD */
.post-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 22px rgba(0,0,0,0.08);
}

/* IMAGEN */
.post-card__image {
    display: block;
}

.post-card__thumb {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}

/* fallback vacío si no hay imagen */
.post-card__thumb--fallback {
    background: var(--bg-service-content);
    height: 210px;
}

/* CONTENIDO */
.post-card__content {
    padding: 1.4rem 1.6rem 1.6rem;
}

.post-card__title {
    margin: 0 0 0.8rem 0;
    font-size: 2rem;
    line-height: 1.25;
}

.post-card__title a {
    text-decoration: none;
    color: var(--text-primary);
}

.post-card__title a:hover {
    color: var(--accent);
}

/* EXCERPT */
.post-card__excerpt {
    color: var(--text-secondary);
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.5;
}

/* PAGINATION */
.blog-pagination {
    margin-top: 3rem;
    text-align: center;
}

.blog-pagination .page-numbers {
    padding: 0.6rem 1rem;
    margin: 0 0.2rem;
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-primary);
}

.blog-pagination .current {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}


/* ------------------------------ */
/* 9. RESPONSIVE */
/* ------------------------------ */

@media (max-width: 750px) {
  /*.aq-sub { display: none; }*/
  .aquayi-title {flex-direction: column !important;}

  .servicios-grid {
      grid-template-columns: 1fr;
  }
}

@media (max-width: 660px) {
  .quick-links2 { display: none; }
  .quick-links { display: none; }
}

@media (max-width: 520px) {
  .quick-links { display: none; }
  body { margin:0.2rem !important; }
  /*.hero-title { display:none; }*/
}




/* ------------------------------ */
/*    FOOTER                      */
/* ------------------------------ */
/* FOOTER OSCURO */
.footer-dark {
    background-color: var(--footer-bg);
    color: #ddd;
    
    font-size: 15px;
}

.footer-container {
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding:2rem;
}

.footer-col p,
.footer-col a {
    color: #bbb;
}

.footer-col a:hover {
    color: #fff;
}

.footer-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
}

.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li {
    margin-bottom: 8px;
}

.footer-menu a {
    text-decoration: none;
}

.footer-social a {
    margin-right: 15px;
    color: #bbb;
}

.footer-social a:hover {
    color: #fff;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-size: 14px;
    color: #888;
    background-color: var(--bg-header);
}

.footer-container p, .footer-container h3,.footer-container li {
    display:flex;align-items:flex-end;gap:1rem;justify-content: center;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
}


.aqy-two-cols {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1/3 – 2/3 */
    gap: 2rem;
    align-items: start;
    margin: 2rem 0;
}

.aqy-two-cols h2 {
  margin-top:0;
}

/* Apilado en móvil */
@media (max-width: 768px) {
    .aqy-two-cols {
        grid-template-columns: 1fr;
    }
    .aqy-two-cols img {
        max-width: 100%;
        height: auto;
    }
}

/* ------------------------------ */
/*** BANNER RGPD                **/
/* ------------------------------ */
.bannerrgpd {
    background: #ffffff;
    border: 1px solid;
    padding: 12px;
    box-shadow: 0 -1px 10px 0 #acabab4d;
    border-radius: 4px;
}

.cky-btn {margin: 0.5rem !important;}
a.cky-policy {border:none !important;}

.cky-notice-btn-wrapper {
  flex-direction: row !important;
}

.cky-notice-btn-wrapper .cky-btn-accept {order: 1 !important; }
.cky-notice-btn-wrapper .cky-btn-customize {order: 2 !important;}
.cky-notice-btn-wrapper .cky-btn-reject {order: 3 !important;}



@media (max-width: 700px) {
    .cky-custom-brand-logo-wrapper, .cky-notice .cky-title, .cky-notice-des, .cky-notice-btn-wrapper {
        padding: 0 8px !important;
    }
    .cky-btn {
      padding: 6px !important;
      width:inherit !important;

    }

}