/*
Theme Name:   Gran Mirador Child
Theme URI:    https://granmiradorcoffee.com.pe
Description:  Tema hijo de Kadence para El Gran Mirador Coffee. Contiene los colores, tipografías y animaciones del diseño aprobado.
Author:       El Gran Mirador Coffee
Template:     kadence
Version:      1.1.0
Text Domain:  granmirador
*/

/* ============================================================
   COLORES DE MARCA (se usan en todo el sitio)
   ============================================================ */
:root {
  --gm-azul:        #1560C9;  /* botones y enlaces (contraste AA) */
  --gm-azul-logo:   #1C7CF4;  /* azul del logo */
  --gm-marino:      #0B2547;  /* secciones oscuras y títulos */
  --gm-marino-2:    #12366A;  /* tarjetas sobre fondo oscuro */
  --gm-pie:         #081B35;  /* pie de página */
  --gm-amarillo:    #FFD400;  /* acento (sol del logo) */
  --gm-amarillo-2:  #FFF4B8;  /* fondos suaves de íconos */
  --gm-gris-fondo:  #F3F7FC;  /* secciones claras */
  --gm-borde:       #E1E9F4;
  --gm-texto:       #3E4F64;
}

/* ============================================================
   CLASES PARA USAR EN LOS BLOQUES
   (Bloque > Avanzado > "Clase(s) CSS adicional(es)")
   ============================================================ */

/* gm-aparecer: el bloque aparece subiendo suavemente al cargar */
.gm-aparecer { animation: gm-fu .9s cubic-bezier(.2,.7,.2,1) both; }
.gm-retraso-1 { animation-delay: .12s; }
.gm-retraso-2 { animation-delay: .24s; }
.gm-retraso-3 { animation-delay: .36s; }
.gm-retraso-4 { animation-delay: .48s; }
@keyframes gm-fu { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* gm-elevar: la tarjeta se eleva al pasar el mouse */
.gm-elevar { transition: transform .35s ease, box-shadow .35s ease; }
.gm-elevar:hover { transform: translateY(-8px); box-shadow: 0 22px 48px rgba(11,37,71,.16); }

/* gm-zoom: la imagen se acerca suavemente al pasar el mouse */
.gm-zoom { overflow: hidden; }
.gm-zoom img { transition: transform .6s ease; }
.gm-zoom:hover img { transform: scale(1.06); }

/* gm-latido: pulso amarillo (botón de video, pin del mapa) */
.gm-latido { animation: gm-pulse 2.4s ease-out infinite; }
@keyframes gm-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,212,0,.6); } 100% { box-shadow: 0 0 0 28px rgba(255,212,0,0); } }

/* gm-sol: rayos del sol girando lentamente (banner principal) */
.gm-sol { animation: gm-spin 50s linear infinite; transform-origin: 50% 50%; }
@keyframes gm-spin { to { transform: rotate(360deg); } }

/* gm-flotar: elemento que flota suavemente */
.gm-flotar { animation: gm-float 5s ease-in-out infinite; }
@keyframes gm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* gm-cinta: cinta de logos de clientes en movimiento continuo */
.gm-cinta { overflow: hidden; }
.gm-cinta > .wp-block-group__inner-container,
.gm-cinta > .kb-row-layout-wrap,
.gm-cinta > * { display: flex; gap: 22px; width: max-content; animation: gm-mq 38s linear infinite; }
@keyframes gm-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* gm-etiqueta: texto pequeño en mayúsculas sobre los títulos de sección */
.gm-etiqueta { color: var(--gm-azul); font-weight: 800; letter-spacing: .18em; font-size: 13px; text-transform: uppercase; }
.gm-oscuro .gm-etiqueta { color: var(--gm-amarillo); }

/* ============================================================
   MENÚ: línea amarilla bajo el elemento activo y al pasar el mouse
   ============================================================ */
.header-navigation .menu > li > a { border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; }
.header-navigation .menu > li > a:hover,
.header-navigation .menu > li.current-menu-item > a,
.header-navigation .menu > li.current-menu-ancestor > a { border-bottom-color: var(--gm-amarillo); }
.header-navigation .sub-menu { border-top: 3px solid var(--gm-amarillo); border-radius: 0 0 16px 16px; overflow: hidden; }

/* ============================================================
   SECCIONES Y BLOQUES (las páginas usan estas clases)
   ============================================================ */
.gm-seccion { padding: 88px 20px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.gm-claro { background: var(--gm-gris-fondo); }
.gm-oscuro { background: var(--gm-marino); color: #fff; }
.gm-oscuro h1, .gm-oscuro h2, .gm-oscuro h3, .gm-oscuro h4 { color: #fff; }
.gm-oscuro p, .gm-oscuro li { color: #C9D7EB; }
.gm-seccion h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.15; font-weight: 800; color: var(--gm-marino); margin-top: 10px; }
.gm-oscuro.gm-seccion h2 { color: #fff; }
.gm-seccion p { font-size: 17px; line-height: 1.7; }
.gm-centrado { text-align: center; }

/* Portada (banner) de cada página */
.gm-hero { min-height: 520px !important; padding: 96px 20px !important; }
.gm-hero h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.05; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.gm-hero p { font-size: 19px; line-height: 1.6; color: #DCE6F5; max-width: 640px; }
.gm-hero .gm-migas a { color: var(--gm-amarillo); font-weight: 700; }
.gm-hero--interna { min-height: 380px !important; }

/* Tarjetas */
.gm-tarjeta { background: #fff; border: 1px solid var(--gm-borde); border-radius: 22px; padding: 28px !important; height: 100%; }
.gm-claro .gm-tarjeta { border-color: var(--gm-borde); }
.gm-oscuro .gm-tarjeta { background: var(--gm-marino-2); border-color: #1F4C8C; }
.gm-tarjeta h3 { font-size: 20px; margin: 8px 0; color: var(--gm-marino); }
.gm-oscuro .gm-tarjeta h3 { color: #fff; }
.gm-tarjeta p { font-size: 15px; line-height: 1.6; margin: 0; }
.gm-tarjeta--amarilla { background: var(--gm-amarillo) !important; border-color: var(--gm-amarillo) !important; }
.gm-tarjeta--amarilla h3, .gm-tarjeta--amarilla p { color: var(--gm-marino) !important; }
.gm-numero { font-family: inherit; font-size: 13px !important; font-weight: 800; color: var(--gm-azul) !important; letter-spacing: .1em; margin: 0 !important; }
.gm-oscuro .gm-numero { color: var(--gm-amarillo) !important; }

/* Cifras */
.gm-cifras { background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(11,37,71,.14); padding: 8px 12px !important; margin-top: -56px !important; position: relative; z-index: 2; }
.gm-cifra { padding: 24px !important; }
.gm-cifra-num { font-size: 40px !important; font-weight: 800; color: var(--gm-azul); line-height: 1.1; margin: 0 !important; }
.gm-cifra-txt { font-weight: 700; color: #1B2B40; margin: 4px 0 0 !important; font-size: 16px !important; }

/* Fotos */
.gm-foto img { border-radius: 24px; width: 100%; object-fit: cover; aspect-ratio: 4 / 3; box-shadow: 0 24px 50px rgba(11,37,71,.16); }
.gm-foto--vertical img { aspect-ratio: 4 / 5; }
.gm-foto--panoramica img { aspect-ratio: 16 / 9; }
.gm-foto--plana img { box-shadow: none; aspect-ratio: 1 / 1; border-radius: 18px; }

/* Botones */
.gm-boton-amarillo .wp-block-button__link { background: var(--gm-amarillo) !important; color: var(--gm-marino) !important; }
.gm-boton-azul .wp-block-button__link { background: var(--gm-azul) !important; color: #fff !important; }
.gm-boton-marino .wp-block-button__link { background: var(--gm-marino) !important; color: #fff !important; }
.gm-boton-borde .wp-block-button__link { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.6) !important; }
.wp-block-button[class*="gm-boton"] .wp-block-button__link { border-radius: 999px; font-weight: 700; padding: 14px 26px; transition: transform .25s, box-shadow .25s; }
.wp-block-button[class*="gm-boton"] .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,37,71,.25); }

/* Listas con check */
.gm-lista-check { list-style: none; padding-left: 0 !important; }
.gm-lista-check li { position: relative; padding-left: 36px; margin-bottom: 12px; }
.gm-lista-check li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--gm-amarillo); color: var(--gm-marino); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }

/* Aviso destacado */
.gm-aviso { background: #FFF8D1; border-left: 4px solid var(--gm-amarillo); border-radius: 0 16px 16px 0; padding: 18px 20px !important; color: #3E3A1A; }
.gm-oscuro .gm-aviso { background: var(--gm-marino-2); color: #DCE6F5; }

/* Valores (chips) */
.gm-chips p { display: inline-block; margin: 0 8px 10px 0 !important; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--gm-borde); font-weight: 700; color: var(--gm-marino); font-size: 15px !important; }

/* Banda de llamado a la acción */
.gm-cta { background: var(--gm-azul); border-radius: 30px; padding: 52px 48px !important; color: #fff; }
.gm-cta h2 { color: #fff !important; margin-top: 0; }
.gm-cta p { color: #E4EDFA; }

@media (max-width: 781px) {
  .gm-seccion { padding: 64px 16px !important; }
  .gm-cifras { margin-top: -32px !important; }
  .gm-cta { padding: 36px 24px !important; }
}

/* ============================================================
   ACCESIBILIDAD: sin animaciones si el usuario lo prefiere
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .gm-aparecer, .gm-latido, .gm-sol, .gm-flotar, .gm-cinta > * { animation: none !important; }
  .gm-elevar, .gm-zoom img { transition: none !important; }
}