/* ============================================================
   SUPEYCO — Cash & Carry Familiar, Olvera (Cádiz)
   Identidad: pueblo blanco andaluz + cartelería de mercado.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --cal:        #FBF8F1;   /* pared encalada */
  --cal-sombra: #F1EBDC;   /* encalado en sombra */
  --tinta:      #23291F;   /* texto principal, verde-negro aceituna */
  --tinta-suave:#4B5245;
  --oliva:      #1F9A3A;   /* verde del logotipo Supeyco */
  --oliva-osc:  #146B29;   /* variante oscura, para pie y hover */
  --teja:       #B24A2C;   /* teja / ladrillo, acento cálido */
  --amarillo:   #E7B23C;   /* etiqueta de precio */
  --linea:      #E3DBC7;
  --blanco:     #FFFFFF;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cal);
  color:var(--tinta);
  font-family:'Source Sans 3', system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:'Barlow Condensed', system-ui, sans-serif;
  font-weight:800;
  letter-spacing:0.01em;
  line-height:1.05;
  color:var(--oliva-osc);
  margin:0 0 0.5em;
}
h1{ font-size:clamp(2.4rem, 6vw, 4.2rem); text-transform:uppercase; }
h2{ font-size:clamp(1.6rem, 3.4vw, 2.3rem); text-transform:uppercase; }
h3{ font-size:1.3rem; font-weight:700; color:var(--tinta); text-transform:none; }

p{ margin:0 0 1em; max-width:66ch; }
a{ color:var(--teja); }

.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--oliva-osc); color:#fff;
  padding:10px 16px; z-index:200;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Cabecera ---------- */
.site-header{
  background:var(--cal);
  border-bottom:3px solid var(--oliva);
  position:sticky; top:0; z-index:100;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:1120px; margin:0 auto; gap:16px;
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-logo{ height:48px; width:auto; display:block; }
@media (max-width:480px){ .brand-logo{ height:38px; } }

nav.main-nav{ display:flex; }
nav.main-nav ul{
  list-style:none; display:flex; gap:4px; margin:0; padding:0; flex-wrap:wrap;
}
nav.main-nav a{
  display:block; padding:10px 14px; text-decoration:none; color:var(--tinta);
  font-weight:600; font-size:0.95rem; border-radius:3px; transition:background .15s, color .15s;
}
nav.main-nav a:hover, nav.main-nav a[aria-current="page"]{
  background:var(--oliva); color:#fff;
}

.nav-toggle{
  display:none; background:var(--oliva); color:#fff; border:0; border-radius:4px;
  padding:8px 12px; font-size:1rem; font-weight:700; cursor:pointer;
}

@media (max-width:820px){
  .nav-toggle{ display:inline-block; }
  nav.main-nav{
    display:none; width:100%; order:3;
  }
  nav.main-nav.open{ display:block; }
  nav.main-nav ul{ flex-direction:column; padding:8px 0 16px; }
  .header-inner{ flex-wrap:wrap; }
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg, var(--cal) 0%, var(--cal-sombra) 100%);
  padding:64px 0 40px;
  border-bottom:1px solid var(--linea);
}
.hero .kicker{
  display:inline-block; background:var(--amarillo); color:var(--tinta);
  font-weight:700; font-size:0.85rem; padding:5px 12px; border-radius:2px; margin-bottom:18px;
}
.hero h1{ max-width:14ch; }
.hero .lead{ font-size:1.2rem; max-width:48ch; color:var(--tinta-suave); }
.hero-photo{
  margin-top:32px; border:6px solid var(--blanco); box-shadow:0 8px 24px rgba(35,41,31,0.18);
  max-height:480px; width:100%; object-fit:cover;
}

/* ---------- Secciones genéricas ---------- */
main{ display:block; }
.section{ padding:56px 0; }
.section + .section{ border-top:1px solid var(--linea); }
.section-tight{ padding:32px 0; }

.grid-photos{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:8px;
}
.grid-photos img{ width:100%; height:180px; object-fit:cover; border-radius:3px; }
@media (max-width:720px){
  .grid-photos{ grid-template-columns:repeat(2, 1fr); }
}

/* Tarjetas de ventajas / valores */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-top:24px;
}
.card{
  background:var(--blanco); border:1px solid var(--linea); border-left:5px solid var(--oliva);
  padding:22px 22px 20px; border-radius:2px;
}
.card h3{ margin-bottom:8px; }
.card p{ margin:0; color:var(--tinta-suave); }

/* Lista de valores con marcador de guion (no numerada: no es secuencia) */
.values-list{ list-style:none; margin:20px 0 0; padding:0; max-width:60ch; }
.values-list li{
  padding:10px 0 10px 18px; border-bottom:1px solid var(--linea); position:relative;
}
.values-list li:first-child{ border-top:1px solid var(--linea); }
.values-list li::before{
  content:"—"; position:absolute; left:0; color:var(--teja); font-weight:700;
}
.values-list strong{ color:var(--oliva-osc); }

/* Datos de contacto / ficha tienda */
.store-card{
  background:var(--blanco); border:1px solid var(--linea); padding:28px;
  display:grid; gap:6px; max-width:440px;
}
.store-card .label{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--tinta-suave); }
.store-card .value{ font-size:1.15rem; font-weight:600; }
.store-card .value a{ text-decoration:none; color:var(--tinta); }
.phone-tag{
  display:inline-block; background:var(--teja); color:#fff; font-weight:700;
  padding:10px 18px; border-radius:2px; text-decoration:none; margin-top:6px;
}

.map-frame{ border:0; width:100%; height:380px; margin-top:8px; filter:saturate(0.9); }

/* Botón genérico */
.btn{
  display:inline-block; background:var(--oliva); color:#fff; font-weight:700;
  padding:12px 22px; border-radius:2px; text-decoration:none;
}
.btn:hover{ background:var(--oliva-osc); }

/* ---------- Blog ---------- */
.post-list{ display:grid; gap:28px; margin-top:24px; }
.post-item{
  display:grid; grid-template-columns:200px 1fr; gap:22px; background:var(--blanco);
  border:1px solid var(--linea); padding:18px;
}
.post-item img{ width:100%; height:100%; object-fit:cover; }
.post-item .date{ font-size:0.85rem; color:var(--teja); font-weight:700; text-transform:uppercase; }
.post-item h2{ font-size:1.4rem; margin:4px 0 8px; }
.post-item p{ color:var(--tinta-suave); margin-bottom:10px; }
@media (max-width:600px){
  .post-item{ grid-template-columns:1fr; }
  .post-item img{ height:180px; }
}

.post-body{ max-width:70ch; margin-top:8px; }
.post-body .date{ font-size:0.9rem; color:var(--teja); font-weight:700; text-transform:uppercase; }
.price-table-note{
  background:var(--cal-sombra); border-left:4px solid var(--amarillo); padding:16px 18px;
  font-size:0.92rem; color:var(--tinta-suave); margin:18px 0;
}
.raw-data{
  background:var(--tinta); color:#E9E4D3; padding:18px; font-size:0.85rem; overflow-x:auto;
  line-height:1.7; white-space:pre-wrap; word-break:break-word;
}

/* ---------- Aviso legal ---------- */
.legal h3{ margin-top:1.6em; color:var(--oliva-osc); }
.legal{ max-width:74ch; }

/* ---------- Pie ---------- */
.site-footer{
  background:var(--oliva-osc); color:#EDEADB; padding:40px 0 28px; margin-top:40px;
}
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; }
.site-footer a{ color:#EDEADB; }
.site-footer nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:4px 18px; padding:0; margin:0 0 16px; }
.site-footer nav a{ text-decoration:none; font-weight:600; font-size:0.95rem; }
.site-footer nav a:hover{ text-decoration:underline; }
.copyright{ font-size:0.85rem; color:#C9C4AC; margin-top:18px; }

/* Foco visible accesible */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--teja); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}