/* =========================
   FUENTES
   ========================= */

@font-face{
  font-family: "Gotham";
  src: url("fonts/GOTHAM-MEDIUM.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* =========================
   BASE
   ========================= */

html, body{
  background: #f6f5f3;
}

body{
  margin: 0;
  padding: 0;
  max-width: none;

  color: #111;
  font-size: 16px;
  line-height: 1.6;
  font-family: Georgia, "Times New Roman", Times, serif;
}

/* Carril único para TODAS las páginas */
.page{
  max-width: 800px;
  margin: 80px auto;
  padding: 0 20px;
}

/* =========================
   LOGO + TÍTULO
   ========================= */

.logo img{
  width: 40px;
  height: auto;
  display: block;
  margin: 0;
}

h1{
  font-family: "Gotham", system-ui, -apple-system, sans-serif;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -3px;
  margin: 0 0 40px 0;
}

.brand-link{
  text-decoration: none;
  color: inherit;
}

/* =========================
   SUBTÍTULO
   ========================= */

.subtitulo{
  font-family: "Inconsolata", monospace;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.6);
  margin-top: -60px;
  margin-bottom: 60px;
  font-weight: 500;
}

/* =========================
   NAVEGACIÓN
   ========================= */

.menu{
  margin-bottom: 20px;
}

.menu a,
.menu span{
  font-family: "Inconsolata", monospace;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.6);
  text-decoration: none;
  margin-right: 20px;
  font-weight: 500;
}

.menu a:hover{
  color: #000;
}

.menu a:visited{
  color: rgba(0,0,0,0.6);
}

.menu span.activo{
  cursor: default;
}

/* =========================
   HOME
   ========================= */

.hero{
  display: block;
  width: 100%;
  margin-top: 40px;
  margin-bottom: 30px;
}

.home-statement{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.6;
  margin-top: 40px;
}

/* =========================
   CARTA
   ========================= */

.carta{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  column-gap: 60px;
  row-gap: 22px;
  max-width: 1100px;
  margin: 0;
}

/* En carta, usa mono para nombre + precio */
body.carta-page .pan-toggle,
body.carta-page .pan-precio{
  font-family: "Andale Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
}

.pan-header{
  display: block;
}

.pan-item{
  margin: 0;
}

.pan-toggle{
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
  letter-spacing: 0.03em;
}

.pan-toggle:hover{
  color: #777;
}

.pan-precio{
  display: block;
  margin-top: -4px;
  white-space: nowrap;
  opacity: 0.6;
  font-size: 0.8em;
}

.pan-detalle{
  display: none;
  margin-top: 6px;
  font-size: 0.9em;
  line-height: 1.4;
  font-family: "Andale Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
}

/* =========================
   MEDIA / CONCEPTO
   ========================= */

.video-wrapper{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-top: 20px;
}

.video-wrapper iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-credit{
  font-family: "Inconsolata", monospace;
  font-size: 10px;
  color: rgba(0,0,0,0.6);
  margin-top: 6px;
}

/* =========================
   CONTACTO
   ========================= */

.contact-text{
  max-width: 640px;
  margin-bottom: 20px;
}

.contact-map{
  width: 100%;
  height: auto;
  display: block;
  max-width: 640px;
}

body.contacto a[href^="mailto:"]{
  color: rgba(0,0,0,0.6);
  text-decoration: none;
}

body.contacto a[href^="mailto:"]:hover{
  color: #000;
  text-decoration: none;
}

/* =========================
   HELPERS
   ========================= */

.inner{
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
}

.pan-image{
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 30px;
}

/* Si alguna página usa .content, que no meta padding extra */
.content{
  width: 100%;
}

/* CARTA: mismo eje izquierdo que el resto, pero más ancho hacia la derecha */
body.carta-page .page{
  max-width: 800px;   /* mismo carril que el resto */
}

.contacto-extra{
  margin-top: 22px;   /* separa del mapa */
}

.contacto-extra p{
  margin: 0;
}

.contacto-extra p + p{
  margin-top: 0;    /* aire entre líneas */
}

.contacto-extra .spacer{
  margin-top: 18px;   /* separación entre Chamberí y Ventilla */
}

a.maplink{
  color: #777;        /* gris desde el inicio */
  text-decoration: none;
}

a.maplink:hover{
  color: #111;        /* vuelve al negro al hover */
}

.pan-item{
  max-width: 320px;
}

.pan-foto{
  width: 160px;          /* tamaño del círculo (ajusta) */
  height: 160px;         /* igual que width = círculo perfecto */
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 0 10px 0;    /* espacio debajo */
}

#foto-toggle {
  max-width: 100%;
  height: auto;
  display: block;
}

.logo-bombas {
  margin-top: 40px;
}

.logo-bombas img {
  width: 200px !important;
  max-width: 200px !important;
  height: auto !important;
  display: block;
}