/* Supermercado Frontera - estilo de la web (reproduce el diseno de la web anterior) */

@font-face{font-family:'Comfortaa';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/comfortaa.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/roboto.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/roboto-italic.woff2) format('woff2')}

:root{
  --naranja:#ffa91f;        /* barra del menu, bloques y titulos del pie */
  --naranja-fuerte:#ff8f1f; /* raya bajo los titulos, iconos y boton Enviar */
  --negro:#000;
  --gris-pie:#2e2e2e;
  --gris-texto:#333;
  --gris-claro:#f4f4f4;
  --titulos:'Comfortaa',sans-serif;
  --texto:'Roboto',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--texto);font-weight:300;font-size:16px;line-height:1.5;color:var(--gris-texto);background:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:400;margin:0}
.contenedor{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.contenedor-estrecho{max-width:920px;margin:0 auto;padding:0 20px}

/* ---- Cabecera ---- */
.cabecera-datos{display:flex;align-items:center;justify-content:space-between;min-height:126px;max-width:1440px;padding:0 75px 0 45px}
.logo img{width:255px;height:auto}
.dato{display:flex;align-items:center;gap:18px;font-size:14px;line-height:1.5;color:#444;min-width:300px}
.dato strong{display:block;font-weight:700;font-size:16px;color:#000}
.icono-linea{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.dato .icono-linea{width:36px;height:36px;color:var(--naranja-fuerte);flex:none}
.barra{background:var(--naranja);box-shadow:0 2px 6px rgba(0,0,0,.15);position:relative;z-index:5}
.barra-interior{display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:0 115px 0 115px;max-width:1440px}
.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.menu li+li::before{content:"·";margin:0 16px;color:#222;font-weight:700}
.menu a{font-size:14px;font-weight:500;letter-spacing:.3px;color:#111}
.menu a.activo,.menu a:hover{font-weight:700;color:#000}
.redes{display:flex;gap:4px}
.redes a{width:40px;height:40px;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.redes a:hover{transform:scale(1.08)}
.redes svg{width:23px;height:23px;fill:#fff}
.redes svg.trazo{fill:none;stroke:#fff;stroke-width:1.8}
.redes svg .relleno{fill:#fff;stroke:none}
.boton-menu{display:none;background:none;border:0;padding:10px;cursor:pointer}
.boton-menu span{display:block;width:26px;height:3px;background:#111;margin:5px 0;border-radius:2px}

/* ---- Portada de cada pagina ---- */
.portada{position:relative;min-height:425px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:60px 20px;
  background:linear-gradient(rgba(70,70,70,.85),rgba(70,70,70,.85)),url(../img/cabecera.jpg) center/cover no-repeat}
.portada h1{font-family:var(--titulos);font-weight:700;font-size:40px;letter-spacing:.5px;line-height:1.2}
.portada p{margin:22px 0 0;font-size:18px;font-weight:400;letter-spacing:1.1px;text-transform:uppercase}
body.inicio .portada h1{font-size:56px;font-weight:400}

/* ---- Bloque de titulo e introduccion ---- */
.intro{text-align:center;padding:90px 20px 85px;max-width:640px;margin:0 auto}
.intro.ancho{max-width:860px;padding-bottom:45px}
.intro h2,.contacto h2{font-family:var(--titulos);font-size:40px;color:#000;letter-spacing:.5px}
.intro h2::after{content:"";display:block;width:48px;height:3px;background:var(--naranja-fuerte);margin:22px auto 28px}
.intro p{margin:0;font-size:16px;line-height:1.6;color:#333}
.antetitulo{font-family:var(--titulos);letter-spacing:4px;font-size:14px!important;color:#333;margin-bottom:6px!important}

/* ---- Inicio: mosaico de fotos y textos ---- */
.mosaico{display:grid;grid-template-columns:1fr 1fr}
.mosaico>div{height:480px;overflow:hidden}
.mosaico-foto img{width:100%;height:100%;object-fit:cover}
.mosaico-texto{display:flex;align-items:center;justify-content:center;padding:40px}
.mosaico-texto p{margin:0;max-width:340px;text-align:center;font-weight:700;font-size:22px;line-height:1.6}
.mosaico-texto.negro{background:#000;color:#fff}
.mosaico-texto.naranja{background:var(--naranja);color:#000}

/* ---- Quienes somos: galeria ---- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-bottom:100px}
.galeria a{display:block;aspect-ratio:1;overflow:hidden;background:#eee}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.galeria a:hover img{transform:scale(1.05)}
.visor{border:0;padding:0;background:transparent;max-width:92vw;max-height:92vh}
.visor::backdrop{background:rgba(0,0,0,.85)}
.visor img{max-width:92vw;max-height:84vh;margin:0 auto}
.visor p{color:#fff;text-align:center;font-size:18px;margin:12px 0 0}
.visor button{position:fixed;top:14px;right:20px;background:none;border:0;color:#fff;font-size:42px;line-height:1;cursor:pointer}

/* ---- Servicios: tarjetas ---- */
.tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:1150px;padding-bottom:30px}
.tarjetas figure{margin:0;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);overflow:hidden}
.tarjetas img{width:100%;aspect-ratio:271/200;object-fit:cover}
.tarjetas figcaption{min-height:55px;padding:14px 10px 18px;text-align:center;font-size:14px;line-height:1.3;color:#333}
.tarjetas figcaption strong{display:block;font-weight:400;font-size:21px;color:#111;margin-bottom:2px}
.pie-palet{display:flex;justify-content:center;padding:20px 20px 90px}
.pie-palet img{width:470px}

/* ---- Contacto ---- */
.contacto{background:var(--gris-claro);padding:80px 20px 110px;text-align:center}
.contacto h2{margin-bottom:40px}
.formulario{max-width:975px;margin:0 auto;text-align:left;font-size:15px;color:#444}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px}
.campos label{display:flex;flex-direction:column;gap:6px}
.campos input{font:inherit;height:40px;border:1px solid #ddd;background:#fff;padding:0 10px;color:#222}
.campos input:focus{outline:2px solid var(--naranja);border-color:transparent}
.cv{margin:20px 0 34px;line-height:1.5}
.enlace-cv{text-decoration:underline;cursor:pointer}
.enlace-cv input{position:absolute;width:1px;height:1px;opacity:0}
.nombre-cv{margin-left:8px;font-style:italic}
.casilla{display:flex;align-items:center;gap:6px;font-size:14px;margin-bottom:16px}
.casilla a{text-decoration:underline}
.trampa{position:absolute;left:-9999px}
.formulario button{display:block;margin:28px auto 0;width:280px;height:54px;border:0;background:var(--naranja-fuerte);color:#000;font:inherit;font-size:15px;cursor:pointer}
.formulario button:hover{background:#f07f0e}
.formulario button[disabled]{opacity:.6;cursor:wait}
.aviso-envio{text-align:center;margin:22px 0 0;font-weight:400}
.aviso-envio.ok{color:#1d7a2e}.aviso-envio.error{color:#b3261e}
.mapa iframe{display:block;width:100%;height:300px;border:0}

/* ---- Paginas de texto legal ---- */
.texto-legal{padding:70px 20px 90px;font-size:14.5px;line-height:1.45;color:#444}
.texto-legal h1{font-family:var(--titulos);font-size:54px;color:#111;margin-bottom:12px}
.texto-legal p{margin:0 0 16px}
.texto-legal a{color:#888;text-decoration:underline}
.texto-legal strong{font-weight:700;color:#222}
.texto-legal table{width:100%;border-collapse:collapse;margin:10px 0 20px;font-size:13px}
.texto-legal td,.texto-legal th{border:1px solid #ccc;padding:6px 8px;vertical-align:top}
.tabla-desplazable{overflow-x:auto}
.mapa-web{list-style:none;padding:0 0 0 12px;margin:24px 0 0}
.mapa-web li{margin-bottom:10px}
.mapa-web a{color:#000;text-decoration:none;font-size:17px;font-weight:400;letter-spacing:.5px}

/* ---- Pie ---- */
footer{color:#fff}
.pie{display:grid;grid-template-columns:repeat(3,1fr);max-width:1240px;margin:0 auto;padding:85px 20px 75px;text-align:center}
.pie-fondo{background:var(--gris-pie)}
.pie-col .icono-linea{width:52px;height:52px;margin:0 auto 14px;stroke-width:1}
.pie-col h4{font-family:var(--titulos);color:var(--naranja);font-size:21px;font-weight:400;margin-bottom:14px}
.pie-col p{margin:0;font-size:15px;line-height:1.6;font-weight:300}
.pie-col p.tenue{color:#ccc}
.legal{background:#000;text-align:center;font-size:13px;padding:10px 20px;line-height:1.6}
.legal a:hover{text-decoration:underline}
.financiacion{background:#fff;padding:7px 120px}
.financiacion img{width:440px;height:auto}

/* ---- Boton flotante de WhatsApp ---- */
.whatsapp-flotante{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.3);z-index:20;border:3px solid #fff}
.whatsapp-flotante svg{width:34px;height:34px;fill:#fff}

/* ---- Pantallas medianas y moviles ---- */
@media (max-width:1100px){
  .cabecera-datos{padding:0 20px}
  .dato{min-width:0}
  .barra-interior{padding:0 20px}
  .tarjetas{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:800px){
  .cabecera-datos{flex-direction:column;gap:14px;padding:18px 16px}
  .dato{display:none}
  .boton-menu{display:block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--naranja);padding:6px 20px 16px;box-shadow:0 6px 8px rgba(0,0,0,.15)}
  .menu.abierto{display:flex}
  .menu li+li::before{content:none}
  .menu li{padding:10px 0;width:100%;border-top:1px solid rgba(0,0,0,.1)}
  .menu li:first-child{border-top:0}
  .redes a{width:36px;height:36px}
  .portada{min-height:300px}
  .portada h1,body.inicio .portada h1{font-size:28px}
  .portada p{font-size:15px}
  .intro{padding:60px 16px}
  .intro h2,.contacto h2{font-size:30px}
  .mosaico{grid-template-columns:1fr}
  .mosaico>div{height:auto}
  .mosaico-foto img{aspect-ratio:3/2;height:auto}
  .mosaico-texto{padding:70px 24px}
  .mosaico-foto:nth-child(4){order:3}        /* foto antes de su texto, como en la original en movil */
  .mosaico-texto.naranja{order:4}
  .mosaico-foto:nth-child(5){order:5}.mosaico-texto:nth-child(6){order:6}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .tarjetas{grid-template-columns:1fr 1fr}
  .campos{grid-template-columns:1fr}
  .formulario button{width:100%}
  .texto-legal h1{font-size:36px}
  .pie{grid-template-columns:1fr;gap:40px;padding:60px 16px}
  .financiacion{padding:8px 16px;display:flex;justify-content:center}
  .financiacion img{width:100%;max-width:330px}
}
@media (max-width:480px){
  .tarjetas{grid-template-columns:1fr}
}

/* ---- Pagina 404 ---- */
.no-encontrada{padding:120px 20px}
.no-encontrada p+p{margin-top:24px}
.no-encontrada a{text-decoration:underline}