/* =========================================================
   local.css — Chipa Chips
   Lo que este cliente necesita distinto del motor. Se carga
   despues de assets/styles.css, por eso gana.
   ========================================================= */

/* Bebas Neue viene en un solo peso y ya es condensada: sin negrita
   falsa, sin el tracking negativo del motor, y mas grande. */
h1,h2,h3,h4{font-weight:400; letter-spacing:.015em; line-height:1}
.hero h1{font-size:clamp(50px,8.4vw,96px); line-height:.95}
h2.titulo{font-size:clamp(38px,5.4vw,64px)}
.tarjeta h3, .paso h3{font-size:26px !important}
.faq summary{font-family:var(--fuente-texto)}

/* El resaltado es el naranja de la marca, no un subrayado */
.resalte{background:none; color:var(--marca); padding:0}
.seccion--marca .resalte{color:#fff}

/* Naranja con letra azul noche: el blanco sobre naranja no llega a contraste */
.btn--primario{color:#0a1628}
.btn--claro{color:#0a1628}
.seccion--marca{color:#0a1628}
.seccion--marca .bajada{color:rgba(10,22,40,.82)}
.seccion--marca .btn--claro{background:#0a1628; color:#fff}

/* La mancha naranja con el nombre, dibujada en CSS. Queda como respaldo
   por si marca.logo se vacia: el motor vuelve a poner el nombre en texto. */
.nav__logo span, .cc-logo{
  display:inline-block; padding:.28em .85em .2em;
  background:var(--marca); color:#fff;
  font-family:"Anton","Bebas Neue",Impact,sans-serif; font-weight:400;
  font-size:19px; line-height:1.1; letter-spacing:.02em; text-transform:uppercase;
  text-shadow:.06em .07em 0 rgba(94,52,22,.55);
  border-radius:58% 42% 55% 45% / 62% 58% 42% 38%;
  white-space:nowrap;
}

/* La portada: la textura azul con las manchas naranjas que mando el
   cliente, detras del titulo. Sin las auras del motor, que encima de
   una foto no aportan. Un velo suave arriba para que el logo del nav
   no caiga sobre la mancha naranja. */
.hero--split{background:#0a1628 url(fotos/portada.webp) center / cover no-repeat}
@media(max-width:700px){ .hero--split{background-image:url(fotos/portada-movil.webp)} }
.hero--split .aura{display:none}
.hero--split::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,22,40,.75), rgba(10,22,40,0) 34%);
}

/* El bowl, vertical, con marco naranja */
.hero__media{max-width:440px; margin-inline:auto; border:3px solid var(--marca)}
.hero__media img{aspect-ratio:3/4}

/* El logo original: mas grande que los 34 px del motor, y en el pie sin
   el filtro blanco que le borraria el naranja */
.nav__logo img{height:48px}
.nav.pegado .nav__logo img{height:40px}
.pie .nav__logo img{filter:none !important; height:44px}
.galeria{grid-template-columns:repeat(2,1fr); gap:10px}
@media(min-width:700px){ .galeria{grid-template-columns:repeat(3,1fr); gap:16px} }
.galeria figure{aspect-ratio:1}

/* En fondo oscuro la hamburguesa del motor sale negra */
.nav__burger{color:inherit}

/* El flotante va a la izquierda: a la derecha estan los + del menu */
.wa{right:auto; left:16px; bottom:16px; width:52px; height:52px}

/* Donde estamos: sin formulario, los datos a la izquierda y el mapa al lado */
#contacto .form{display:none}
#contacto .grilla{grid-template-columns:1fr}
#contacto .mapa{min-height:340px; margin-top:32px !important}
@media(min-width:861px){
  #contacto .grilla > div{display:grid; grid-template-columns:1fr 1.2fr; gap:0 56px; align-items:start}
  #contacto .encabezado{margin-bottom:28px}
  #contacto .mapa{grid-column:2; grid-row:1 / span 2; height:100%; margin-top:0 !important}
}