/*!
 * Panki — mini-grid + reset
 * ES: Reemplaza el grid de Materialize (12 columnas) con Flexbox nativo.
 * EN: Replaces Materialize's 12-col grid with native Flexbox.
 * Solo incluye las clases que la landing usa: container, row, col, s12, l3, l6.
 */

/* Reset mínimo */
*{box-sizing:border-box;}
body{margin:0;}

/* Contenedor centrado */
.container{width:90%;max-width:1280px;margin:0 auto;}

/* Fila flexible */
.row{display:flex;flex-wrap:wrap;margin:0 -.75rem;}
.row:after{content:"";display:table;clear:both;}

/* Columnas: padding lateral común */
.col{padding:0 .75rem;min-height:1px;}

/* s12 = ancho completo en móvil (base, mobile-first) */
.col.s12{width:100%;}

/* Breakpoint escritorio (>=992px), igual que Materialize 'l' */
@media (min-width:992px){
  .col.l3{width:25%;}
  .col.l4{width:33.3333%;}
  .col.l6{width:50%;}
}

/* Utilidades que el HTML usa */
[hidden]{display:none !important;}
.right{float:right;}
.flow-text{font-size:1.1rem;}

/* Navbar fija (reemplazo simple del navbar-fixed de Materialize) */
.navbar-fixed{position:relative;}
.navbar-fixed nav{background:transparent;box-shadow:none;}
nav .nav-wrapper{min-height:64px;}

/* =====================================================================
   AJUSTES PANKI (sobre-escriben la plantilla heredada)
   ===================================================================== */

/* Fuente redondeada con fallback: si Fredoka One tarda o no carga, se usa
   una sans redondeada del sistema en vez de caer a serif (Times). */
body, h1, h2, h3, h4, h5, h6, p, a, address, .flow-text {
  font-family: 'Fredoka One', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif !important;
}

/* Los logos de redes NO deben tener línea/subrayado ni en reposo ni en hover.
   La plantilla ponía border-bottom en a:hover; aquí lo anulamos para los íconos. */
.social-icons a,
.social-icons a:link,
.social-icons a:visited,
.social-icons a:hover,
.social-icons a:active {
  border-bottom: 0 !important;
  text-decoration: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Compactar el espacio en blanco: la plantilla usaba paddings/margenes
   pensados para una pagina larga con muchas secciones. Al ser una landing
   corta, se reducen para eliminar el hueco grande antes del footer. */
section { padding: 1.5rem 0 !important; }
footer { padding: 2rem 0 !important; }
#services.services { padding-bottom: 1rem !important; }
.services i { margin: 1rem 0 .5rem !important; font-size: 5rem !important; }
.visit-us { margin-top: 1rem !important; }
#contact.scrollspy { padding-top: 1rem !important; }

/* Evitar que la pagina estire de mas: el contenido manda la altura. */
html, body { height: auto !important; }
main { min-height: 0 !important; }

/* Compactar el bloque de contacto/redes: los h5 traian mucho margen y
   dejaban la seccion aireada y aparentemente vacia. */
.visit-us h5 { margin: .4rem 0 !important; line-height: 1.3 !important; }
.visit-us address { margin: .4rem 0 !important; line-height: 1.4 !important; }
.visit-us .contact-details > .col { padding-top: 0 !important; padding-bottom: 0 !important; }
.contact-details p { margin: .3rem 0 !important; }

/* Titulos mas juntos a su contenido (venian con 4-8rem de margen del theme). */
h1,h2,h3,h4,h5 { margin: .6rem 0 !important; }
.services i { line-height: 1 !important; }

/* Logo: contorno + sombra sutil para que el logo blanco sea visible sobre
   cualquier fondo (claro u oscuro), sin alterar el color de la marca.
   Se combinan varias drop-shadow finas para simular un borde en todo el
   contorno, mas una sombra suave para dar separacion del fondo. */
.brand img {
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,.45))
    drop-shadow(1px 0 1px rgba(0,0,0,.35))
    drop-shadow(-1px 0 1px rgba(0,0,0,.35))
    drop-shadow(0 1px 1px rgba(0,0,0,.35))
    drop-shadow(0 -1px 1px rgba(0,0,0,.35))
    drop-shadow(0 3px 6px rgba(0,0,0,.25));
}