/* seo-headings.css — Don Pernil, propuesta SEO 23/09/2026
   Objetivo: corregir la jerarquía de títulos (un solo H1 por página)
   SIN cambiar el aspecto visual. Cada clase replica el estilo que
   estilosindex2.css le da a la etiqueta original.
   Se enlaza DESPUÉS de estilosindex2.css y ANTES del <style> interno de
   cada página (así .letramediana / .letrachica siguen mandando). */

/* H1 real que se ve como el h2 decorativo original (80px Parisienne rojo) */
.como-h2 {
  font-size: 80px;
  line-height: 50px;
  font-family: 'Parisienne', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: red;
  text-align: inherit;
  padding: 0;
  background: none;
  border: 0;
  border-image: none;
  -moz-border-image: none;
  -webkit-border-image: none;
  -o-border-image: none;
  width: auto;
}

/* H1 real que se ve como el h3 original (Contacto) */
.como-h3 {
  font-size: 70px;
  line-height: 60px;
  font-family: 'Parisienne', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: red;
  text-align: inherit;
  padding: 0;
  background: none;
  border: 0;
  border-image: none;
  -moz-border-image: none;
  -webkit-border-image: none;
  -o-border-image: none;
  width: auto;
}

/* H2 que se ve como el h1 decorativo original (recuadro con borde) */
.como-h1 {
  font-size: 60px;
  line-height: 50px;
  font-family: 'Parisienne', cursive, Verdana, Arial, Helvetica, sans-serif;
  font-weight: 500;
  text-align: center;
  padding: 5px;
  color: red;
  background-color: #ffeede;
  border-style: solid;
  border-width: 20px;
  -moz-border-image: url(../img/fondoh1.png) 7;
  -webkit-border-image: url(../img/fondoh1.png) 7;
  -o-border-image: url(../img/fondoh1.png) 7;
  border-image: url(../img/fondoh1.png) 7;
  border-image-slice: 45;
}

/* Los títulos que además llevan .letramediana conservan su tamaño y
   tipografía chica (así se ven hoy en vivo: 26px Ubuntu) */
.como-h1.letramediana {
  font-size: 26px;
  font-family: 'Ubuntu', cursive, Verdana, Arial, Helvetica, sans-serif;
}

/* Subtítulos de contenido nuevo: mismo look que el texto de la columna
   (Ubuntu), en negrita, sin la tipografía decorativa. */
.como-sub {
  font-family: 'Ubuntu', cursive, Verdana, Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: inherit;
  margin: 28px 0 10px;
}
.bloque-seo p, .bloque-seo li { font-size: inherit; }
.bloque-seo ul { padding-left: 22px; }

/* estilosindex2.css le da a .columnacontenido margin-bottom:-100px (en todos los
   anchos): la columna se mete 100px bajo el borde de la hoja. Carta y delivery lo
   compensan con <br> finales; el bloque que cierra el home lo compensa acá, para
   que el último texto no se monte sobre el footer. */
.bloque-seo-final { padding-bottom: 110px; }

/* Links del contenido nuevo: el sitio aplica a todo <a> Parisienne 36px en rosa
   claro (#EFC6C7) y blanco en hover, que se pierden sobre el fondo crema. Acá van
   sobrios: misma tipografía y tamaño del texto, bordó de la marca (el del botón
   "Ir a la tienda online"), subrayados. Solo dentro de .bloque-seo. */
.bloque-seo a,
.bloque-seo a:link,
.bloque-seo a:visited {
  font-family: 'Ubuntu', Verdana, Arial, Helvetica, sans-serif;
  font-size: inherit;
  font-weight: 500;
  color: #4E090A;
  text-decoration: underline;
}
.bloque-seo a:hover,
.bloque-seo a:focus {
  color: red;
  text-decoration: underline;
}

/* Preguntas frecuentes: acordeón (mismo patrón que Pizzabrossa, con la paleta
   de Don Pernil). <details> nativo, sin JavaScript. */
.faqs-dp { margin: 10px 0 24px; }
.faq-dp {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(78, 9, 10, 0.25);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: background 0.2s ease;
}
.faq-dp:hover, .faq-dp[open] { background: rgba(255, 255, 255, 0.8); }
.faq-dp summary {
  padding: 14px 18px;
  font-family: 'Ubuntu', Verdana, Arial, Helvetica, sans-serif;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 500;
  color: #4E090A;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.faq-dp summary::-webkit-details-marker { display: none; }
.faq-dp summary::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 1;
  color: red;
  transition: transform 0.2s ease;
}
.faq-dp[open] summary::after { transform: rotate(45deg); }
.faq-dp summary:hover { color: red; }
.faq-dp-resp { padding: 0 18px 16px; }
.faq-dp-resp p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #333;
}

/* Anchos que estilosindex2.css aplica a h1 por breakpoint */
@media (min-width: 1200px) and (max-width: 1449px) { .como-h1 { width: 60%; } }
@media (min-width: 992px) and (max-width: 1199px)  { .como-h1 { width: 40%; } }
@media (max-width: 568px) {
  .como-h1 { width: 100%; }
  .como-h2 { font-size: 60px; line-height: 45px; }
}