/* ==========================================================
   EL BUEN PAN - ESTILOS GENERALES
   Paleta de colores tomada del logo:
   - Crema (fondo):        #FDF9ED
   - Dorado pan (acento):  #CC8C42
   - Café oscuro (texto):  #7E4D22
   ========================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  background-color: #FDF9ED;
  color: #4A2E14;
  line-height: 1.6;
}

h1, h2, h3 {
  color: #7E4D22;
  font-family: 'Georgia', serif;
}

a {
  text-decoration: none;
}

section {
  padding: 60px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ==========================================================
   ENCABEZADO
   ========================================================== */
.header {
  background-color: #FDF9ED;
  border-bottom: 3px solid #CC8C42;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(126, 77, 34, 0.1);
}

.header-contenido {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  flex-wrap: wrap;
}

.logo-nombre {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.nombre-marca {
  font-size: 1.4rem;
  font-weight: bold;
  color: #7E4D22;
}

.menu {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.menu a {
  color: #7E4D22;
  font-weight: bold;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.menu a:hover {
  border-color: #CC8C42;
}

/* ==========================================================
   SECCIÓN INICIO
   ========================================================== */
.inicio {
  position: relative;
  text-align: center;
  border-radius: 20px;
  margin-top: 30px;
  overflow: hidden;
  background-image: url("../img/imagen_02.jpg");
  background-size: cover;
  background-position: center;
}

.inicio-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(253, 249, 237, 0.92);
}

.inicio-contenido {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.botones-inicio {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.boton-secundario {
  background-color: transparent;
  color: #7E4D22;
  border: 2px solid #CC8C42;
  box-shadow: none;
}

.boton-secundario:hover {
  background-color: #CC8C42;
  color: #FFFDF9;
}

.logo-grande {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(126, 77, 34, 0.25);
  margin-bottom: 15px;
}

.inicio h1 {
  font-size: 2.6rem;
  margin-bottom: 8px;
}

.frase {
  font-size: 1.3rem;
  font-style: italic;
  color: #CC8C42;
  margin-bottom: 15px;
}

.descripcion {
  max-width: 600px;
  margin-bottom: 25px;
}

.boton {
  display: inline-block;
  background-color: #CC8C42;
  color: #FFFDF9;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(126, 77, 34, 0.3);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.boton:hover {
  background-color: #B5722C;
  transform: translateY(-2px);
}

/* ==========================================================
   SECCIÓN NOSOTROS
   ========================================================== */
.nosotros {
  text-align: center;
}

.nosotros h2 {
  margin-bottom: 25px;
}

.nosotros-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.logo-mediano {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.nosotros-contenido p {
  max-width: 650px;
}

/* ==========================================================
   SECCIÓN POR QUÉ ELEGIRNOS
   ========================================================== */
.elegirnos {
  text-align: center;
}

.elegirnos h2 {
  margin-bottom: 30px;
}

.caracteristicas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.caracteristica {
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 25px 15px;
  box-shadow: 0 4px 12px rgba(126, 77, 34, 0.12);
  transition: transform 0.2s ease;
}

.caracteristica:hover {
  transform: translateY(-5px);
}

.icono {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 10px;
}

.caracteristica h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.caracteristica p {
  font-size: 0.9rem;
  color: #5A3B1E;
}

/* ==========================================================
   SECCIÓN PRODUCTOS
   ========================================================== */
.productos {
  text-align: center;
}

.productos h2 {
  margin-bottom: 30px;
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.tarjeta {
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 12px rgba(126, 77, 34, 0.15);
  transition: transform 0.2s ease;
}

.tarjeta:hover {
  transform: translateY(-5px);
}

.tarjeta img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
}

.tarjeta h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.tarjeta p {
  font-size: 0.95rem;
  color: #5A3B1E;
}

/* ==========================================================
   SECCIÓN VIDEO
   ========================================================== */
.video-seccion {
  text-align: center;
}

.video-seccion h2 {
  margin-bottom: 25px;
}

.video-contenedor {
  display: flex;
  justify-content: center;
}

.video-contenedor video {
  width: 100%;
  max-width: 700px;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(126, 77, 34, 0.25);
}

/* ==========================================================
   SECCIÓN CONTACTO
   ========================================================== */
.contacto {
  text-align: center;
  background-color: #F6E9D4;
  border-radius: 20px;
}

.contacto h2 {
  margin-bottom: 20px;
}

.contacto p {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.contacto a {
  color: #7E4D22;
  font-weight: bold;
  border-bottom: 2px solid #CC8C42;
}

.botones-contacto {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.botones-contacto .boton {
  border-bottom: none;
  color: #FFFDF9;
}

.boton-whatsapp {
  background-color: #4EAD5B;
}

.boton-whatsapp:hover {
  background-color: #3D8C48;
}

.boton-mapa {
  background-color: #7E4D22;
}

.boton-mapa:hover {
  background-color: #663C1A;
}

/* ==========================================================
   PIE DE PÁGINA
   ========================================================== */
.footer {
  text-align: center;
  padding: 20px;
  background-color: #7E4D22;
  color: #FDF9ED;
  font-size: 0.9rem;
}

/* ==========================================================
   RESPONSIVE - TABLET
   ========================================================== */
@media (max-width: 900px) {
  .tarjetas {
    grid-template-columns: repeat(2, 1fr);
  }

  .caracteristicas {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================
   RESPONSIVE - TELÉFONO
   ========================================================== */
@media (max-width: 600px) {
  .header-contenido {
    flex-direction: column;
    gap: 10px;
  }

  .menu {
    justify-content: center;
    gap: 12px;
  }

  .inicio h1 {
    font-size: 2rem;
  }

  .tarjetas {
    grid-template-columns: 1fr;
  }

  .caracteristicas {
    grid-template-columns: 1fr;
  }

  .botones-inicio,
  .botones-contacto {
    flex-direction: column;
    align-items: center;
  }

  section {
    padding: 40px 15px;
  }
}


/* Integración final: mantiene la paleta y las secciones originales. */
html {scroll-padding-top:110px} section {scroll-margin-top:24px}
.header-contenido {gap:12px}.menu {gap:14px}.menu a {font-size:.95rem}
.salto {position:fixed;left:16px;top:-100px;z-index:999;background:#fff;padding:12px;color:#4a2e14}.salto:focus {top:12px}
:focus-visible {outline:3px solid #9a6028;outline-offset:5px}
.seccion-intro {max-width:660px;margin:0 auto 30px;text-align:center}.seccion-intro h2 {font-size:2rem;margin-bottom:12px}.ceja {text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;font-family:Arial,sans-serif;color:#82521f;margin-bottom:10px}
.media-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;text-align:left}
.media-card {min-width:0;border:1px solid #e5d7bd;border-radius:20px;overflow:hidden;background:#fffdf8;box-shadow:0 8px 26px #7e4d2212}
.media-top {display:flex;justify-content:space-between;padding:14px 20px;color:#795024;font:12px Arial,sans-serif;letter-spacing:.05em}
.media-card video {display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#251a13}
.media-info {padding:20px 22px 24px}.media-info h3 {font-size:1.25rem;margin-bottom:8px}.media-info p {font-size:.96rem;margin-bottom:14px;color:#614932}
.enlace {color:#7e4d22;text-decoration:underline;text-underline-offset:4px;font-size:.92rem}.enlace:hover {color:#9a6028}
.alternativa {text-align:left;margin-top:26px;padding:20px;border:1px solid #dfcfad;border-radius:16px;background:#f6eddc}.alternativa summary {cursor:pointer;color:#7e4d22;font-weight:bold}.alternativa video {display:block;width:min(100%,300px);aspect-ratio:9/16;margin:20px auto;object-fit:contain;background:#251a13;border-radius:12px}
.revista {border-top:1px solid #e7d9be}.revista-acciones {display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px 0}.pdf-panel {width:100%;height:760px;border:1px solid #dfcfad;border-radius:14px;background:#eee7dc}.pdf-panel p {padding:30px;text-align:center}
.nota-revista {text-align:center;font-size:.9rem;color:#69523b}.footer a {color:#fdf9ed;text-decoration:underline}.footer p+p {margin-top:8px}
.creditos {max-width:900px;margin:auto;padding:36px 20px}.creditos article {margin:30px 0;padding:22px;background:white;border-radius:16px}.creditos pre {white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 Georgia,serif;margin-top:20px}.creditos a {color:#7e4d22;text-decoration:underline}
@media(max-width:700px){.media-grid{grid-template-columns:1fr}.seccion-intro h2{font-size:1.7rem}.pdf-panel{height:540px}.header{position:relative}.menu{gap:8px 14px}.inicio{margin:16px 10px 0}.contacto{margin:0 10px}html{scroll-padding-top:12px}.revista-acciones .boton{width:100%;text-align:center}.media-info{padding:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}


/* Corrección de la versión existente: portadas y logo en movimiento. */
[hidden]{display:none!important}.marca-animada{display:block;object-fit:contain;background:#fff;border:0;border-radius:0;box-shadow:none;aspect-ratio:16/9;height:auto}.logo.marca-animada{width:88px}.logo-grande.marca-animada{width:300px;max-width:90%;margin-bottom:12px}.logo-mediano.marca-animada{width:170px}
.marco-player{position:relative;aspect-ratio:16/9;background:#251a13;overflow:hidden}.marco-player .video-pieza{width:100%;height:100%;aspect-ratio:inherit;object-fit:contain;display:block}.portada-play{width:100%;height:100%;position:absolute;inset:0;display:block;border:0;padding:0;cursor:pointer;background:#3e2a1b;color:white}.portada-play img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease,filter .35s ease}.play-circulo{position:absolute;inset:0;margin:auto;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:rgba(30,20,12,.60);border:1px solid rgba(255,255,255,.8);box-shadow:0 4px 22px #0004;transition:transform .25s ease,background .25s ease;pointer-events:none}.play-circulo svg{width:48px;height:48px;margin-left:3px}.portada-play:hover img{transform:scale(1.025);filter:brightness(.92)}.portada-play:hover .play-circulo{transform:scale(1.06);background:rgba(74,46,20,.8)}.cerrar-player{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;border:1px solid #fff8;color:white;background:#24170ed9;font:28px/1 Arial;cursor:pointer;z-index:3}.error-player{position:absolute;bottom:52px;left:12px;right:12px;background:#fff3da;padding:8px;color:#4a2e14;font-size:.85rem}.marco-vertical{width:min(100%,300px);aspect-ratio:9/16;margin:20px auto;border-radius:12px}.alternativa .video-pieza{width:100%;height:100%;margin:0;border-radius:0}.boton{font-family:inherit;font-size:1rem;cursor:pointer;border:0}.boton-secundario{border:2px solid #cc8c42}.creditos summary{font-weight:bold;color:#7e4d22;cursor:pointer}.creditos>details>h2{margin-top:22px}.pdf-panel{margin-top:16px}.media-info .enlace:empty{display:none}
@media(max-width:600px){.logo-grande.marca-animada{width:250px}.play-circulo{width:70px;height:70px}.header-contenido{padding:12px}.pdf-panel{height:520px}}

.nota-catalogo { text-align: center; margin: 12px 0 20px; color: #69523b; }
.tarjeta .precio-catalogo { margin-top: 12px; font-weight: bold; }