/*
Theme Name: Caiman
Author: Eric
Version: 1.0.15
*/

/* ======================== HEADER ======================== */
.site-header .brand-row{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:nowrap;
}
.site-header .nav-cta{ margin-left:auto !important; }

/* contenedor de enlaces */
.site-header .wp-block-navigation__container{ gap:24px; }

/* Botón CTA del header: asegurar horizontal siempre */
.site-header .header-cta .wp-block-button__link{
  position:static !important;
  writing-mode:horizontal-tb !important;
  transform:none !important;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:auto;
}

/* overlay del menú por encima de todo */
.site-header .wp-block-navigation__responsive-container{ z-index: 9999; }

/* ===== Nav móvil ===== */
@media (max-width: 980px){
  .site-header .brand-row{ flex-wrap:wrap !important; }
  .site-header .wp-block-navigation__responsive-container-open{ display:inline-flex !important; }
  .site-header .wp-block-navigation__container{ display:none !important; }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
    display:flex !important; flex-direction:column; gap:12px;
  }
  .site-header .nav-cta{ width:100%; justify-content:space-between; }
}

/* Marca coherente con footer */
.brand-title{ text-decoration:none !important; }
.brand-title:hover{ opacity:.9; }

/* ======================== FOOTER ======================== */
.site-footer .row{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:24px;
}
.site-footer .legal{
  list-style:none; display:flex; gap:24px; margin:0; padding:0;
}
.site-footer .legal a{ color:#234634; text-decoration:none; }
@media (max-width: 700px){
  .site-footer .legal{ width:100%; justify-content:center; gap:12px; flex-wrap:wrap; }
}

/* ======================== UTILIDADES ======================== */
.u-center { display:flex; align-items:center; justify-content:center; }
.u-stack-8 { display:flex; flex-direction:column; gap:8px; }
.u-stack-12 { display:flex; flex-direction:column; gap:12px; }
.u-wrap { flex-wrap: wrap; gap: 12px !important; }
.u-text-muted { color: var(--wp--preset--color--muted); }
.u-card { background:#fff; border-radius:16px; box-shadow:0 2px 8px #0001; }

/* Contenedor/Sección y títulos homogéneos */
.container { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.section { padding-block: 64px; }
@media (max-width: 800px){ .section { padding-block: 40px; } }

.section-title { margin: 0 0 16px; line-height: 1.15; text-wrap: balance; }
.display-hero { line-height: 1.05; margin: 0 0 12px; text-wrap: balance; }
.has-text-align-center { text-align: center; }

/* ======================== HOME: iconos beneficios ======================== */
.benefit-icon img{
  width:36px; height:36px; object-fit:contain; display:block;
}
@media (min-width: 992px){
  .benefit-icon img{ width:40px; height:40px; }
}

/* =========================================================
   SERVICIOS (scoped por #svc-section)
   ========================================================= */
#svc-section .wp-block-columns{ gap:18px; }
#svc-section .wp-block-columns > .wp-block-column{ display:flex; }
@media (max-width: 800px){ #svc-section .wp-block-columns{ gap:16px !important; } }

/* Tarjeta base */
#svc-section .svc-card{
  background:#fff;
  border:1px solid #EBEFEA;
  border-radius:16px;
  padding:20px;
  min-height:280px;

  position:relative;
  overflow:hidden;       /* todo el overlay dentro */
  isolation:isolate;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:100%; max-width:560px; margin-inline:auto;
  cursor:pointer;
  box-shadow:0 8px 30px rgba(19,54,48,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
#svc-section .svc-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px #7B9A35 inset,   /* anillo verde */
    0 12px 34px rgba(19,54,48,.10);
}

/* Icono arriba centrado (sin pastilla) */
#svc-section .svc-icon{ margin:0 0 8px 0; }
#svc-section .svc-icon img{
  display:block; margin:0 auto;
  width:64px; height:64px; object-fit:contain;
  background:transparent !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important;
}

/* Caras y overlay */
#svc-section .svc-face{ position:relative; z-index:1; transition:opacity .25s ease; }
#svc-section .svc-details{
  position:absolute; inset:16px 20px 20px 20px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; z-index:2;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
#svc-section .svc-details ul{
  margin:0; padding-left:18px; text-align:left; line-height:1.5; max-width:28ch;
}

/* Mostrar overlay/ocultar cara solo en la tarjeta activa (hover, focus, tap) */
#svc-section .svc-card:hover .svc-details,
#svc-section .svc-card:focus-within .svc-details,
#svc-section .svc-card.is-open .svc-details{
  opacity:1; transform: translateY(0); pointer-events:auto;
}
#svc-section .svc-card:hover .svc-face,
#svc-section .svc-card:focus-within .svc-face,
#svc-section .svc-card.is-open .svc-face{
  opacity:.08;
}

/* Accesibilidad: foco visible */
#svc-section .svc-card:focus-within{
  outline: 2px solid #7B9A35; outline-offset: 2px; border-radius:16px;
}

/* =========================================================
   CASOS DE USO (scoped por #cu-section)
   ========================================================= */
#cu-section{ display:flex; flex-direction:column; gap:18px; }

/* Tarjeta base: textos a la izquierda, icono a la derecha */
#cu-section .cu-card{
  display:flex; align-items:center; gap:24px;
  padding:24px 28px;
  border:1px solid rgba(2,6,23,.08);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 28px rgba(2,6,23,.08);
  max-width:1100px; width:100%; margin-inline:auto;
  flex-direction: row; /* fijo: no alternamos layout */
}
#cu-section .cu-card .cu-body{ order:1; text-align:left; flex:1 1 auto; }
#cu-section .cu-card .cu-media{ order:2; flex:0 0 96px; display:flex; align-items:center; justify-content:center; margin-left:16px; }

/* Alternamos SOLO el fondo (efecto visual) */
#cu-section .cu-card:nth-child(even){
  background:#EAF6EE;
  border-color: rgba(64,192,87,.25);
  box-shadow:0 12px 34px rgba(64,192,87,.10);
}

/* Icono */
#cu-section .cu-media img{
  width:72px; height:72px; object-fit:contain; display:block;
  filter: drop-shadow(0 6px 12px rgba(19,54,48,.10));
}

/* Texto */
#cu-section .cu-body h3{ margin:0 0 6px; line-height:1.15; text-wrap:balance; }
#cu-section .cu-body .cu-tagline{ margin:0 0 10px; color:#234634; opacity:.85; }
#cu-section .cu-body ul{ margin:0; padding-left:18px; }
#cu-section .cu-body li{ margin:6px 0; }

/* Responsive */
@media (max-width: 900px){
  #cu-section .cu-card{ padding:20px; gap:18px; }
}
@media (max-width: 720px){
  #cu-section{ gap:16px; }
  #cu-section .cu-card{ flex-direction:column; text-align:left; }
  #cu-section .cu-card .cu-media{ order:2; margin-left:0; }
  #cu-section .cu-card .cu-body{ order:1; }
}