/* ===========================
   BASE MATI BANEGAS
=========================== */

@font-face {
  font-family: 'Modern Typewriter';
  src: url('../fonts/ModernTypewriter.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #0b0b0b;
  --text: #f2f2f2;
  --muted: #999999;
  --link: #c9a24d;
}

/* ===========================
   RESET + LAYOUT BASE
=========================== */

*,
*::before,
*::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html{
  width: 100%;
  overflow-x: hidden;
}

body{
  margin: 0;
  overflow-x: hidden;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: #000;
  color: var(--text);
  line-height: 1.6;
}


/* Empuja footer abajo */

main{
  background:#000;
  min-height: 60vh;
}

/* ===========================
   HEADER
=========================== */

header{
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: 20px 0;
  position: relative;
  z-index: 1000;
}

/* ===========================
   NAV (PREMIUM)
=========================== */

.nav{
  width: 100%;
}

.menu{
  list-style: none;
  display: flex;
  gap: 18px;
  align-items: center;
}

/* Item base */

.menu li{
  position: relative;
  padding-bottom: 8px;
  border-radius: 8px;
  transition: .2s ease;
}

/* Link principal */

.menu a{
  color: #f6f6f6;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;

  font-weight: 700;
  letter-spacing: .4px;

  opacity: .96;
  transition: .2s ease;

  text-shadow:
    0 0 4px rgba(255,255,255,.25),
    0 0 10px rgba(255,255,255,.08);
}


/* Hover premium dorado */

.menu a:hover{
  background: linear-gradient(
    to right,
    rgba(201,162,77,.18),
    rgba(201,162,77,.06)
  );

  box-shadow:
    inset 0 -2px 0 var(--link),
    0 0 10px rgba(201,162,77,.15);

  opacity: 1;
}

/* Micro elevación elegante */

.menu li:hover{
  transform: translateY(-1px);
}

/* ===========================
   SUBMENU (DESKTOP)
=========================== */

.submenu{
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  background: #0b0b0b;
  list-style: none;
  padding: 12px;
  border-radius: 14px;

  border: 1px solid rgba(201,162,77,.18);
  box-shadow: 0 12px 35px rgba(0,0,0,.5);

  opacity: 0;
  transform: translateY(6px);
  transition: .2s ease;
  pointer-events: none;
}

/* Mostrar submenu */

.has-submenu:hover > .submenu{
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Links submenu */

.submenu li a{
  display: block;
  padding: 10px 12px;
  border-radius: 8px;

  font-weight: 500;
}

/* ===========================
   MOBILE MENU (PREMIUM)
=========================== */

#menu-toggle{
  display:none;
}

.menu-icon{
  display:none;
  font-size:32px;
  cursor:pointer;
  color: var(--text);
}

@media (max-width:1500px){

  /* Botón hamburguesa */

  .menu-icon{
    display:block;
    position:absolute;
    right:0;
    top:5px;
    z-index:1100;
  }

  /* Panel menú */

  .menu{
    display:none;
    flex-direction:column;
    background:#000;
    position:absolute;
    top:60px;
    left:0;
    right:0;
    padding:20px;
    border-radius:14px;

    border:1px solid rgba(201,162,77,.2);
    box-shadow:0 12px 35px rgba(0,0,0,.5);

    backdrop-filter: blur(4px);
  }

  /* Abrir menú principal */

  #menu-toggle:checked + .menu-icon + .menu{
    display:flex;
  }

  /* TEXTO PERLADO */

  .menu a{
    font-weight:600;
    color: var(--text);
    letter-spacing:.3px;
    text-shadow: 0 0 6px rgba(242,242,242,.12);
  }

  /* CAJONES DORADOS */

  .menu li{
    background: linear-gradient(
      to right,
      rgba(201,162,77,.12),
      rgba(201,162,77,.04)
    );
    border-radius:10px;
    padding:6px 8px;
    margin-bottom:6px;
  }

  /* FEEDBACK TOUCH */

  .menu li:hover{
    background: linear-gradient(
      to right,
      rgba(201,162,77,.22),
      rgba(201,162,77,.08)
    );
  }

  /* SUBMENU MOBILE */

  .submenu{
    display:none;
    position:static;
    box-shadow:none;
    background: transparent;
    padding-left:12px;
  }

  /* Abrir submenu SOLO dentro menú abierto */

  #menu-toggle:checked + .menu-icon + .menu .has-submenu:hover > .submenu{
    display:block;
  }

}

/* ===========================
   HERO HOME
=========================== */
.hero{
  min-height: 105vh;
  padding-top: 40px;
  padding-bottom: 80px;
  background-image: url("../imagenes/hero-mati-banegas.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.45) 55%,
    rgba(11,11,11,.85) 100%
  );
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 100%
  );
  pointer-events:none;
}

/* Contenido hero */

.hero-content{
  width: min(1100px, 92%);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Título */

.hero h1{
  font-size: clamp(1.9rem, 2.4vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 16px;
}

/* Texto */

.hero p{
  max-width: 560px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

/* Punto y aparte real entre párrafos */

.hero p + p{
  margin-top: 18px;
}

/* Botones */

.hero-buttons{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;

  /* Espacio entre párrafo y botón */
  margin-top: 32px;
}

.btn-hero{
  background: var(--link);
  color: #000;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.btn-hero:hover{
  filter: brightness(1.05);
}

.btn-hero-outline{
  border: 1px solid var(--link);
  color: var(--link);
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.btn-hero-outline:hover{
  background: rgba(201,162,77,.08);
}

/* ===========================
   FONDO Y PÁGINAS HERO
=========================== */

.page-hero{
  min-height: 85vh;
  padding: 40px;

  background-image: url("../imagenes/bg-mati-banegas.webp");
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;

  position: relative;
}

.page-hero-olivetti{
  background-image: url("../imagenes/hero-mati-banegas.webp");
  background-position: center 20%;
}

.page-hero.page-hero-olivetti::before{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.9) 100%
  );
}

/* Overlay elegante + fusión negra */

.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.8) 70%,
    rgba(0,0,0,1) 100%
  );
}

.page-hero-content{
  width: min(1100px, 92%);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Títulos hero internos */

.page-hero h1{
  font-size: clamp(1.8rem, 2.1vw, 2.2rem);
  margin-bottom: 12px;
}

/* Texto hero interno */

.page-hero p{
  max-width: 640px;
  color: var(--muted);
  margin: 0;
}

/* Punto y aparte real en hero interno */

.page-hero-content p + p{
  margin-top: 18px;
}

/* ===========================
   CONTENIDO INTERNO EDITORIAL
=========================== */

.page-content{
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;

  font-family: Georgia, "Times New Roman", serif;
  text-align: justify;
  hyphens: manual;
  word-break: normal;
}

@media (max-width:768px){
  .page-content{
    text-align: left;
  }
}

/* ===========================
   ARTÍCULO BLOG (DISTINTIVO EDITORIAL)
=========================== */

article.page-content{
  position: relative;
}

article.page-content::before{
  content:"";
  display:block;
  width:60px;
  height:2px;
  background: var(--link);
  margin-bottom:18px;
  opacity:.6;
}

/* ===========================
   LISTAS EDITORIALES
=========================== */

/* Viñetas */

.page-content ul{
  list-style: disc;
  padding-left: 22px;
  margin:18px 0 22px;
}

.page-content ul li{
  margin-bottom:10px;
  line-height:1.7;
}

/* Listas numeradas */

.page-content ol{
  padding-left:22px;
  margin:18px 0 22px;
}

.page-content ol li{
  margin-bottom:10px;
  line-height:1.7;
}

/* Resaltar keywords dentro de listas */

.page-content li strong{
  color:var(--link);
  font-weight:600;
}

/* ===========================
   LINKS EDITORIALES
=========================== */

.page-content a{
  color: var(--link);
  font-weight: 600;
}

.cierre-nota a{
  color: var(--link);
  font-weight: 700;
  text-decoration: underline;
}

/* ===========================
   PÁRRAFOS EDITORIALES
=========================== */

.page-content p{
  margin: 0;
}

.page-content p + p{
  margin-top: 18px;
}

/* Texto explicativo antes de listas */

.page-content p + ul,
.page-content p + ol{
  margin-top: 12px;
}

/* ===========================
   CITAS EDITORIALES (BLOCKQUOTE)
=========================== */

.page-content blockquote{
  margin: 28px 0;
  padding: 18px 22px;

  border-left: 4px solid var(--link);

  background: linear-gradient(
    to right,
    rgba(201,162,77,.08),
    rgba(0,0,0,0)
  );

  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.7;

  color: #f5e6bf; /* Blanco perlado cálido */

  border-radius: 8px;

  box-shadow: inset 0 0 12px rgba(201,162,77,.05);
}

/* ===========================
   JERARQUÍA TIPOGRÁFICA
=========================== */

.page-content h1 {
  margin-top: 48px;
  margin-bottom: 18px;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--link);
}

.page-content h2 {
  margin-top: 42px;
  margin-bottom: 14px;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--link);
}

.page-content h3 {
  margin-top: 36px;
  margin-bottom: 12px;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--link);
}


/* ===========================
   TABLAS EDITORIALES BLOG
=========================== */

.page-content table{
  width:100%;
  border-collapse:collapse;
  margin:24px 0;
  min-width:300px;
  background:#0b0b0b;
  color:var(--text);
  border:1px solid rgba(201,162,77,.25);
  border-radius:10px;
  overflow:hidden;
}

.page-content th,
.page-content td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid rgba(201,162,77,.15);
}

.page-content th{
  background:rgba(201,162,77,.08);
  color:var(--link);
  font-weight:600;
}

.page-content tr:nth-child(even){
  background:rgba(255,255,255,.03);
}

.page-content tr:hover{
  background:rgba(201,162,77,.08);
}

/* ===========================
   IMÁGENES EDITORIALES BLOG
=========================== */

.page-content img{
  max-width:800px;
  width:100%;
  height:auto;
  display:block;
  margin:24px auto;
  border-radius:10px;
}


/* ===========================
   HERO PRIVACIDAD (VARIANTE)
=========================== */

.page-hero-privacidad{
  background-image: url("../imagenes/papiro-sello-privacidad-mati-banegas.webp");
  background-position: center 70%;
}

/* ===========================
   FOOTER
=========================== */

footer{
  background:#000;
  text-align: center;
  padding: 40px 0;
  color: var(--muted);
  font-size: 14px;
}

.footer-logo{
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
}

footer p{
  margin: 8px 0;
}

footer a{
  color: var(--link);
  text-decoration: none;
}

footer a:hover{
  text-decoration: underline;
}

/* ===========================
   RESPONSIVE BASE (MOBILE)
=========================== */

@media (max-width:768px){

  /* HERO HOME + INTERNOS */

.hero,
.page-hero{
  min-height:60vh;
  padding:50px 20px 30px;
  background-position:center;
}

  /* Refuerzo de contraste en mobile */

  .hero::before,
  .page-hero::before{
    background: rgba(0,0,0,.75);
  }

  /* Texto hero */

  .hero h1,
  .page-hero h1{
    font-size:1.8rem;
    line-height:1.2;
    text-shadow: 0 2px 12px rgba(0,0,0,.8);
    color: var(--link); /* ← agregado */
  }

  .hero p,
  .page-hero p{
    font-size:1rem;
  }

  /* Encabezados dentro del contenido en mobile */

  .page-content h1,
  .page-content h2,
  .page-content h3{
    color: var(--link); /* ← asegura dorado en artículos */
  }

  /* Botones táctiles */

  .hero-buttons{
    flex-direction:column;
  }

  .btn-hero,
  .btn-hero-outline{
    width:100%;
    text-align:center;
    padding:14px;
    font-size:16px;
  }

  /* Contenido interno */

  .page-content{
    padding:40px 18px;
  }

  /* Footer más compacto */

  footer{
    padding:30px 15px;
    font-size:13px;
  }

}


/* ===========================
   BLOG ARTICULOS EDITORIAL
=========================== */

.post{
  max-width: 820px;
  margin: 0 auto;
  padding: 70px 20px 90px;
}

/* Header editorial */

.post-header h1{
  font-size: clamp(1.9rem, 2.2vw, 2.3rem);
  line-height: 1.15;
  margin-bottom: 8px;
}

.post-header h1{
  font-size: clamp(1.9rem, 2.2vw, 2.3rem);
  line-height: 1.15;
  margin-bottom: 8px;
  color: var(--link); /* ← agregado */
}

/* Asegura dorado también en h3 del artículo */
.post-content h3{
  color: var(--link);
}

.post-meta{
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 28px;
}

/* Imagen destacada */

.post-image img{
  width:100%;
  height:auto;
  display:block;
  margin:0 auto 34px;
  border-radius:12px;
}

/* Contenido lectura */

.post-content p{
  font-size:1.05rem;
  line-height:1.75;
  margin-bottom:18px;
}

/* Destacar AIDA en dorado solo en esos párrafos */
.post-content .aida-texto strong{
  color: var(--link);
}

/* Subtítulos */

.post-content h2{
  margin-top:42px;
  margin-bottom:14px;
  font-size:1.45rem;
  line-height:1.25;
  color:var(--link);
}

/* Citas */

.post-content blockquote{
  border-left:3px solid var(--link);
  padding-left:16px;
  margin:30px 0;
  font-style:italic;
  color:var(--muted);
}

/* Listas */

.post-content ul,
.post-content ol{
  padding-left:22px;
  margin:18px 0 22px;
}

.post-content li{
  margin-bottom:10px;
  line-height:1.7;
}

/* Lista con círculos */
.post-content ul.circle{
  list-style-type: circle;
}

/* Imágenes internas */

.post-content img{
  max-width:100%;
  border-radius:10px;
  margin:28px auto;
  display:block;
}

/* ===========================
   BLOG GRID (LISTADO)
=========================== */

.blog-grid{
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: 70px 0 100px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  gap: 32px;

  justify-content: start;
}

/* Card individual */

.blog-card{
  background: #0b0b0b;
  border-radius: 18px;
  overflow: hidden;

  border: 1px solid rgba(201,162,77,.12);
  transition: .25s ease;
}

/* Imagen dentro de la card */

.blog-card img{
  width: 100%;
  height: 260px;        /* mismo alto para todas las imágenes */
  object-fit: cover;    /* recorta sin deformar */
  display: block;       /* elimina espacio fantasma inferior */
}

/* Hover elegante */

.blog-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  border-color: rgba(201,162,77,.35);
}

/* Link wrapper */

.blog-card a{
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Imagen */

.blog-card img{
  width:100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background:#000;
  padding:12px;
  display:block;
}

/* Contenido */

.blog-card-content{
  padding: 18px 18px 22px;
}

/* Título */

.blog-card-content h2{
  font-size:1.2rem;
  line-height:1.25;
  margin-bottom:10px;
  color: var(--text);
}

/* Extracto */

.blog-card-content p{
  font-size:.95rem;
  color: var(--muted);
  line-height:1.5;
}

/* ===========================
   SECCIÓN SOBRE MÍ
=========================== */

.wall-frame{
  margin: 22px 0 26px 0;
  padding: 14px;
  border-radius: 18px;

  /* sensación de pared */
  background: rgba(255,255,255,.03);

  /* marco dorado */
  border: 1px solid rgba(197,160,77,.75);

  /* sombra tipo cuadro */
  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    inset 0 0 0 2px rgba(197,160,77,.22);
}

.wall-frame img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;

  /* “vidrio” sutil */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.wall-frame figcaption{
  margin-top: 10px;
  font-style: italic;
  text-align: center;
  color: rgba(245,240,230,.82);
  font-size: .95rem;
  line-height: 1.5;
}

/* ===========================
   AJUSTE TAMAÑO CUADROS SOBRE MÍ
   (centrado + tamaño uniforme)
=========================== */

.wall-frame{
  max-width: 520px;   /* tamaño fijo tipo cuadro */
  margin: 40px auto;  /* centrado automático */
}

/* ===========================
   FIX CUADROS SOBRE MÍ - FORZADO
=========================== */

.post-content .wall-frame{
  width: 520px;
  max-width: 90%;
  margin: 50px auto !important;
}

.post-content .wall-frame img{
  width: 100%;
}




/* ===========================
   NEWSLETTER EN CASOS DE ÉXITO
=========================== */

.newsletter-casos {
  background: #0e0e0e;
  border-top: 1px solid rgba(201, 162, 77, 0.2);
  padding: 60px 24px;
  text-align: center;
}

.newsletter-casos-inner {
  max-width: 520px;
  margin: 0 auto;
}

.newsletter-casos .section-eyebrow {
  color: var(--link);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.newsletter-casos h2 {
  font-size: 1.6rem;
  color: var(--off-white);
  margin-bottom: 10px;
}

.newsletter-casos p {
  color: #aaa;
  font-size: 0.95rem;
  margin-bottom: 28px;
}

.newsletter-casos .form-control {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid rgba(201, 162, 77, 0.3);
  color: var(--off-white);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.newsletter-casos .form-control::placeholder {
  color: #666;
}

.newsletter-casos button.primary {
  background: var(--link);
  color: #000;
  border: none;
  padding: 13px 32px;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
  transition: opacity 0.2s;
}

.newsletter-casos button.primary:hover {
  opacity: 0.85;
}

.newsletter-casos .ml-form-successContent h4 {
  color: var(--link);
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.newsletter-casos .ml-form-successContent p {
  color: #aaa;
}

/* ===========================
   COACHING — CONECTOR NEWSLETTER
=========================== */

.coaching-news-conector {
  margin-top: 24px;
  color: #aaa;
  font-size: 0.9rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.coaching-news-btn {
  margin-top: 12px;
  text-align: center;
}

.btn-secundario {
  display: inline-block;
  border: 1px solid var(--link);
  color: var(--link);
  padding: 11px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.btn-secundario:hover {
  background: var(--link);
  color: #000;
}

/* ===========================
   CARRUSEL DE EXCUSAS
=========================== */

.excusas-section {
  padding: 60px 24px;
  text-align: center;
  background: #080808;
}

.excusas-track-wrapper {
  overflow: hidden;
  max-width: 600px;
  margin: 32px auto 0;
  position: relative;
}

.excusas-track {
  display: flex;
  transition: transform 0.5s ease;
}

.excusa-globo {
  min-width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.excusa-globo p {
  background: #111;
  border: 1px solid rgba(201, 162, 77, 0.35);
  border-radius: 18px;
  padding: 24px 32px;
  color: var(--off-white);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  position: relative;
  max-width: 500px;
  width: 100%;
}

.globo-cola {
  display: block;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 14px solid rgba(201, 162, 77, 0.35);
  margin-top: -1px;
}

/* ===========================
   CARRITO NAV - RINCÓN DEL ESCRITOR
   Este bloque estiliza el ícono de carrito que el archivo js/nav.js
   inserta automáticamente en el <nav> de cada página. No hace falta
   tocar ningún HTML: el JS lo crea, y este CSS lo viste.
=========================== */

/* Posición y forma del carrito en DESKTOP */
.nav-cart{
  position: absolute;   /* lo saca del flujo normal del menú, así no le roba ancho a los demás links */
  right: 0;              /* pegado al borde derecho del nav */
  top: 50%;
  transform: translateY(-50%);  /* centrado vertical exacto */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 2px;
}

/* Tamaño y color del ícono (el dibujo del carrito en sí) - DESKTOP */
.cart-icon{
  width: 30px;
  height: 30px;
  color: var(--link);
  animation: cart-glow 6s ease-in-out infinite;
}

/* Efecto al pasar el mouse por encima - DESKTOP */
.nav-cart:hover .cart-icon{
  transform: translateY(-1px);
  filter: drop-shadow(0 0 6px rgba(201,162,77,.7));
}

/* Brillo del ÍCONO (se usa en desktop, donde no hay fondo detrás) */
@keyframes cart-glow{
  0%, 78%, 100%{
    filter: drop-shadow(0 0 0 rgba(201,162,77,0));
  }
  85%{
    filter: drop-shadow(0 0 10px rgba(201,162,77,1));
  }
  92%{
    filter: drop-shadow(0 0 4px rgba(201,162,77,.6));
  }
}

/* Brillo del BOTÓN completo (se usa en mobile, donde el carrito tiene fondo dorado) */
@keyframes cart-glow-boton{
  0%, 78%, 100%{
    box-shadow: 0 0 0 rgba(201,162,77,0);
  }
  85%{
    box-shadow: 0 0 12px 3px rgba(201,162,77,.9);
  }
  92%{
    box-shadow: 0 0 5px 1px rgba(201,162,77,.5);
  }
}

/* Le hace lugar al carrito en el menú de DESKTOP */
.menu{
  gap: 13px;
  padding-right: 38px;
}

/* El carrito pasa a formar parte del flujo normal del nav en DESKTOP,
   así queda justo después de "Contacto" como un ítem más, no aislado
   en el borde derecho del header. En mobile no se toca nada: el
   carrito sigue siendo el botón dorado absoluto de siempre. */
@media (min-width:769px){
  .nav{
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .menu{
    padding-right: 0;
  }
  .nav-cart{
    position: static;
    transform: none;
  }
}

/* Ajustes específicos para MOBILE: acá el carrito es un botón
   cuadrado dorado con el ícono en negro adentro, en vez de solo
   la línea dorada que se usa en desktop */
@media (max-width:1500px){
  .nav-cart{
    top: 14px;
    right: 52px;
    transform: none;
    padding: 6px;
    background: var(--link);
    border-radius: 6px;
    animation: cart-glow-boton 6s ease-in-out infinite;
  }
  .cart-icon{
    width: 22px;
    height: 22px;
    color: #000;
    animation: none;
  }
}

/* ===========================
   HOME — HEADER CON LOGO Y HERO DOS COLUMNAS (Celina)
   Exclusivo del home por ahora, no toca el header de las
   demás páginas (que usan la clase base .nav sin logo).
=========================== */

.header-home{
  width: 100%;
  background: #000;
  padding: 16px 0;
  position: relative;
  z-index: 1000;
}

.header-home .nav{
  max-width: 1200px;
  width: 92%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
}

.nav-logo{
  display: block;
  flex-shrink: 0;
}

.nav-logo img{
  height: 120px;
  width: auto;
  display: block;
}

.header-home .menu{
  gap: 18px;
}

/* Hero dos columnas */

.hero-celina{
  background: #000;
  padding: 60px 0 90px;
}

.hero-celina-grid{
  max-width: 1200px;
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.hero-celina-text{
  flex: 1 1 480px;
  min-width: 0;
}

.hero-celina-img{
  flex: 1 1 480px;
  min-width: 0;
  height: 420px;
  overflow: hidden;
  border-radius: 4px;
}

.hero-celina-img img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.hero-celina-text h1{
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 20px;
}

.hero-celina-text h1 strong{
  font-family: 'Modern Typewriter';
  color: var(--link);
  font-weight: normal;
}

.hero-celina-copy{
  font-family: 'Modern Typewriter';
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 32px;
}

@media (max-width: 900px){
  .hero-celina-img{
    display: none;
  }
  .hero-celina-grid{
    gap: 0;
  }
}

/* Rango intermedio: laptops más chicas, donde el menú completo
   con el logo grande empieza a quedar justo de espacio */
/* Escala continua y gradual: letra, espacios y logo se van
   achicando sin saltos a medida que la pantalla se achica,
   desde el desktop grande hasta el borde del mobile (960px).
   Así no queda ningún ancho de pantalla sin cubrir. */
@media (min-width: 1501px){
  .menu a{
    font-size: 0.88rem;
    padding: 8px 6px;
  }
  .header-home .nav{
    gap: 14px;
  }
  .header-home .menu{
    gap: 6px;
  }
}

/* MOBILE (<=960px): layout explícito de 3 piezas —
   logo a la izquierda, carrito + hamburguesa agrupados a la derecha.
   Se sacan del position:absolute y pasan a flex real, así no hay
   abismos ni dependencias del ancho total de la pantalla. */
@media (max-width:1500px){
  .header-home .nav{
    justify-content: flex-start;
  }
  .nav-logo{
    margin-right: auto;
  }
  .nav-logo img{
    height: 86px;
    max-width: 100%;
  }
  .nav-cart{
    position: static !important;
    transform: none !important;
    order: 2;
  }
  .menu-icon{
    position: static !important;
    order: 3;
    margin-left: 4px;
  }
  .hero-celina{
    padding: 10px 0 30px;
  }
}

/* ===========================
   MODERN TYPEWRITER — aplicado a menú, encabezados y footer
   en TODO el sitio. Los párrafos de cuerpo largo se quedan con
   Georgia (la negrita no se distingue bien en Modern Typewriter).
=========================== */

.menu a{
  font-family: 'Modern Typewriter';
  font-weight: normal;
  letter-spacing: 1px;
  white-space: nowrap;
}

h1, h2, h3,
.page-hero h1,
.page-content h1,
.page-content h2,
.page-content h3,
.hero-celina-text h1{
  font-family: 'Modern Typewriter';
}

.intro-copy,
.page-hero-content p{
  font-family: 'Modern Typewriter';
}

/* Brillo blanco perlado en las negritas de los párrafos, para que no
   se vean apagadas con el gris general del sitio */
p strong, .intro-copy strong{
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255,255,255,0.35);
}

.hero-celina-text h1 strong{
  font-weight: normal;
}

footer p{
  font-family: 'Modern Typewriter';
}

/* Aviso "Scrolleá" — sutil, en la esquina inferior derecha del hero,
   para indicar que hay más contenido debajo (reseñas, etc.) */
.hero-celina{
  position: relative;
}

.scroll-hint{
  position: absolute;
  right: 20px;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Modern Typewriter';
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(201,162,77,0.75);
  text-decoration: none;
  animation: scroll-hint-glow 2.4s ease-in-out infinite;
  z-index: 2;
}

.scroll-hint-arrow{
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  animation: scroll-hint-bounce 1.6s ease-in-out infinite;
}

@keyframes scroll-hint-glow{
  0%, 100% { opacity: 0.55; text-shadow: 0 0 0 rgba(201,162,77,0); }
  50% { opacity: 1; text-shadow: 0 0 10px rgba(201,162,77,0.9); }
}

@keyframes scroll-hint-bounce{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (max-width: 900px){
  .scroll-hint{
    display: none;
  }
}