/* ===========================
   Tema "Mate Web" — 2025
   Inspirado en mate (verde), bandera (celeste/blanco) y bombilla (dorado)
   Drop-in: no requiere tocar el HTML/PHP existente
   =========================== */

:root{
  /* Paleta */
  --mate-900:#0e5b3e;   /* verde yerba oscuro */
  --mate-700:#177a55;   /* verde principal */
  --mate-500:#1f976a;   /* verde acento */
  --celeste-arg:#36aeea;/* celeste bandera */
  --dorado:#c7a451;     /* bombilla */
  --blanco:#ffffff;
  --negro:#101418;
  --gris-100:#f5f7f8;
  --gris-300:#e6eaec;
  --gris-600:#778089;

  /* Tipografía & ritmo */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --radius-xl: 18px;
  --radius-md: 12px;
  --shadow-sm: 0 2px 10px rgba(16,20,24,.06);
  --shadow-md: 0 10px 24px rgba(16,20,24,.12);
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-6: 2rem;

  /* Bordes decorativos sutiles */
  --borde-celeste: 4px solid var(--celeste-arg);
}
/*tipografia*/
@import url('https://fonts.googleapis.com/css2?family=Squada+One&display=swap');
/* Reset suave */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--negro);
  background:
    linear-gradient(180deg, var(--blanco), var(--gris-100) 120%);
  line-height:1.6;
}
.mate-web ,#tipografia{
  font-size: 2rem;
  font-family: "Squada One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* Contenedor máximo genérico */
.container, .contenedor, .wrapper, .content{
  max-width:1100px;
  margin-inline:auto;
  padding-inline:clamp(12px, 3vw, 24px);
}

/* ---------- Header / Navbar ---------- */
header, .site-header, nav{
  background:linear-gradient(90deg, var(--mate-900), var(--mate-700));
  color:var(--blanco);
  position:sticky; top:0; z-index:50;
  box-shadow:var(--shadow-sm);
}
header a, nav a{
  color:var(--blanco);
  text-decoration:none;
  padding:var(--space-3) clamp(10px,2.4vw,18px);
  display:inline-block;
  border-radius:10px;
  transition:transform .15s ease, background-color .2s ease, color .2s ease;
}
header a:hover, nav a:hover,
header a:focus-visible, nav a:focus-visible{
  background:rgba(255,255,255,.1);
  outline:none;
  transform:translateY(-1px);
}
.logo, .brand, img[alt*="logo" i]{
  height:40px; width:auto;
}


/* Separador inferior celeste estilo bandera */
header::after, nav::after{
  content:"";
  display:block;
  height:4px;
  background:
    linear-gradient(90deg, var(--celeste-arg) 60%, var(--blanco) 60% 63%, var(--celeste-arg) 63%);
}

/* ---------- Títulos ---------- */
h1,h2,h3{
  line-height:1.15;
  letter-spacing:.2px;
}
h1{
  font-size:clamp(1.8rem, 2.8vw, 2.4rem);
  color:var(--mate-900);
  margin: var(--space-6) 0 var(--space-3);
  border-left:8px solid var(--dorado);
  padding-left:12px;
}
h2{font-size:clamp(1.4rem, 2.2vw, 1.8rem); color:var(--mate-700); margin:24px 0 8px}
h3{font-size:clamp(1.15rem, 1.6vw, 1.3rem); color:var(--mate-500)}

/* ---------- Botones (aplica a .btn, button, .button) ---------- */
.btn, .button, button, input[type="submit"], input[type="button"]{
  appearance:none;
  border:none;
  background:linear-gradient(180deg, var(--mate-700), var(--mate-900));
  color:var(--blanco);
  padding: .7rem 1.1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover, .button:hover, button:hover,
input[type="submit"]:hover, input[type="button"]:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}
.btn--claro, .button--alt{
  background: linear-gradient(180deg, var(--celeste-arg), #2f8fc4);
}

/* ---------- Tarjetas ---------- */
.card, .tarjeta, article, section.box{
  background:var(--blanco);
  border:1px solid var(--gris-300);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  padding: clamp(14px, 3.2vw, 24px);
  margin-block: var(--space-4);
}
.card--accent{
  border: var(--borde-celeste);
}

/* ---------- Listas de productos / grillas ---------- */
.grid, .productos, .cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2.4vw, 22px);
  align-items:stretch;
}

/* ---------- Tablas ---------- */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--blanco);
  border:1px solid var(--gris-300);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
th, td{
  padding:.75rem 1rem;
  border-bottom:1px solid var(--gris-300);
}
thead th{
  background:linear-gradient(180deg, var(--gris-100), #eef3f6);
  color:var(--mate-900);
  text-align:left;
}

/* ---------- Formularios ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], textarea, select{
  width:100%;
  padding:.65rem .8rem;
  border:1px solid var(--gris-300);
  border-radius:12px;
  background:var(--blanco);
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--celeste-arg);
  box-shadow:0 0 0 4px rgba(54,174,234,.15);
}

/* ---------- Enlaces ---------- */
a{color:var(--mate-700)}
a:hover{color:var(--mate-900)}

/* ---------- Secciones con acento ---------- */
.section--accent, .franja, .hero{
  background:
    radial-gradient(1200px 400px at -10% -40%, rgba(199,164,81,.15) 0%, transparent 50%),
    radial-gradient(900px 300px at 110% 10%, rgba(54,174,234,.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--gris-100), var(--blanco) 65%);
  border-top: var(--borde-celeste);
  border-bottom: var(--borde-celeste);
}

/* ---------- Footer ---------- */
footer{
  margin-top:var(--space-6);
  background: linear-gradient(180deg, var(--mate-900), #0a3f2b);
  color:var(--blanco);
  padding: var(--space-4) 0;
  border-top: 6px solid var(--dorado);
}
footer a{color:#e9f6ff}
footer .container{display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; justify-content:space-between}

/* ---------- Imágenes ---------- */
img{
  max-width:100%;
  height:auto;
  border-radius:12px;
}
.figure, .media{margin-block: var(--space-3)}

/* ---------- Utilidades ---------- */
.mt-0{margin-top:0!important}
.mb-0{margin-bottom:0!important}
.center{text-align:center}
.pill{
  display:inline-block; padding:.35rem .7rem; border-radius:999px;
  background:rgba(54,174,234,.12); color:var(--mate-900); border:1px solid rgba(54,174,234,.35)
}

/* ---------- Accesibilidad / Motion ---------- */
:focus-visible{outline:3px solid var(--celeste-arg); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

/* ---------- Responsive navbar (fallback genérico) ---------- */
@media (max-width: 860px){
  nav ul, header ul{display:flex; flex-wrap:wrap; gap:6px; padding:8px}
  header a, nav a{padding:.6rem .8rem}
  .logo, .brand, img[alt*="logo" i]{height:34px}
}
/*personalizacion*/
/*index*/
main div{display: flex; flex-direction: column;align-items: center;}
h3.autor{text-align: center; padding: 1rem;}
div.ImgDescription{display: flex; flex-direction: column; width: 50%; align-items: center;}
.textJulio{display: flex;flex-direction: column;}
.textJulio .blockquote-footer{position: relative;}
/*mate*/
.text-center #texto.lead{text-align: center;width: 100%;}
.titulomates h2{font-family: 'Courier New', Courier, monospace;}
.MateTradicion{padding: 2rem;}
.MateTradicion h2{text-align: center;padding: 2rem;}
.MateTradicion p{width: 40rem; margin-left: 17rem ;text-align: center;}
.MateTradicion img{   
   top: 18rem;
    position: absolute;
    left: 69rem;
    width: 25rem;}
#MateAmargo{padding: 2rem;}
#MateAmargo h3{text-align: center;padding: 2rem;}
#MateAmargo p{width: 40rem; margin-left: 17rem ;text-align: center;}
#MateAmargo img{top: 40rem;
    position: absolute;
    left: 69rem;
    width: 25rem;}
#MateDulce{padding: 2rem;}
#MateDulce h3{text-align: center;padding: 2rem;}
#MateDulce p{width: 40rem; margin-left: 17rem ;text-align: center;}
#MateDeLeche{padding: 2rem;}
#MateDulce img{top: 65rem;
    position: absolute;
    left: 69rem;
    width: 25rem;}
#MateDeLeche h3{text-align: center;padding: 2rem;}
#MateDeLeche p{width: 40rem; margin-left: 17rem ;text-align: center;}
#MateDeLeche img{top: 91rem;
    position: absolute;
    left: 69rem;
    width: 25rem;}
#MateTerere{padding: 2rem;}
#MateTerere h3{text-align: center;padding: 2rem;}
#MateTerere p{width: 40rem; margin-left: 17rem ;text-align: center;}
#MateTerere img{top: 117rem;
    position: absolute;
    left: 69rem;
    width: 25rem;}
/*Origen*/
.imgOrigen{ width: 50rem;}
#texto{  display: flex; font-size: 1rem; width: 70%; text-align: center;}
.blockquote-footer{position:absolute}
/*Elaboracion*/
.container-md{display: flex;}
/*imagen de cebar mate*/
.cebarMate{ display: flex; width: 30rem;}
.autor{text-align: center;padding: 1rem;}
.lead{padding: 2rem;}
/*contacto*/
h2.mate-web{
  text-align: center;
}
/*fotografias*/
div.galeria{
    padding-left: 6rem;
}
h3.titulo-ilustraciones{
    text-align: center;    
  font-size: 2rem;
  font-family: "Squada One", sans-serif;
  font-weight: 400;
  font-style: normal;

}
/*contacto*/
.form{
  padding: 3rem;
}
/*productos*/
ul.gallery{
  display:flex;
}

/*mediaquery*/
@media (min-width: 1300px){
  .cebarMate{width: 40%;
            padding-left: 6rem;}

}
@media (max-width: 768px){    
  div.container-md.cajaOrigen{display: flex;flex-wrap: wrap;justify-content: center;}
  div.container-md.cajaPreparacion{display: block;}
  div.galeria{display:contents}
  ul.gallery{display: initial;}
}

.nav-link{  font-family: "Yuji Boku", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;margin:2rem;
}