/* ===================================================================
   HOJA DE ESTILOS - COCINAEXTERIOR.COM
   ===================================================================
   Paleta de marca (esto es solo un comentario de referencia, no son
   variables funcionales -- lo dejé como texto plano a propósito para
   que sea 100% compatible sin depender de que el navegador o
   FrontPage entiendan variables CSS modernas).

   Carbon   #2A2826  -> encabezados, pie de pagina, texto principal
   Ceniza   #FAF7F2  -> fondo principal de las paginas
   Brasa    #A8420F  -> enlaces, botones, acentos generales
   Oxido    #8C3A1E  -> etiqueta y acentos de "Cuidado y Restauracion"
   Lumbre   #D98A12  -> etiqueta y acentos de "Recetas"
   Acero    #5C5856  -> texto secundario, bordes, lineas

   Si quieres cambiar, por ejemplo, el color de los enlaces, busca
   "A8420F" en este archivo (Ctrl+F) y cambialo en cada lugar donde
   aparezca. No hay un solo lugar central porque eso requeriria
   variables CSS, que algunas versiones de FrontPage no muestran bien
   en su vista de diseño (aunque si funcionan en cualquier navegador
   real). Si confirmas que tu FrontPage las maneja bien, podemos
   cambiar a ese sistema despues.
   =================================================================== */


/* 1. CONFIGURACION DEL CONTENEDOR (fondo de pantalla + caja de contenido) */
html {
    background-color: #E8E2D8; /* Gris calido para el area fuera de la caja, en pantallas grandes */
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
    color: #2A2826; /* Carbon */
    background-color: #FAF7F2; /* Ceniza */
    box-sizing: border-box; /* para que el padding no sume ancho extra y desborde la pantalla */

    /* Centrado y limites */
    margin: 0 auto;
    max-width: 900px;      /* Limite para monitores grandes */
    width: 100%;            /* Casi total en celulares */

    /* Caja de contenido */
    padding: 7px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.12);
}


/* 2. TABLAS Y CELDAS (estilo general) */
table, td, th {
    font-size: 14pt;
    color: #2A2826; /* Carbon */
}

table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}


/* 2B. TABLAS DE CONTENIDO LADO A LADO (video + texto, foto + ingredientes, etc.)
   Ponle class="tabla-contenido" a cualquier tabla cuyas columnas
   tengan contenido sustancial (no iconos chicos), para que en
   pantallas angostas las columnas se apilen en vez de comprimirse.
   Esto es el ajuste que probamos la semana pasada con la maqueta de
   la receta de discada. */
@media (max-width: 600px) {
  .tabla-contenido,
  .tabla-contenido tr,
  .tabla-contenido td {
    display: block !important;
    width: 100% !important;
  }
}


/* 3. VIDEO DE YOUTUBE RESPONSIVO
   Esta regla aplica automaticamente a cualquier <iframe> que pegues
   en la pagina -- incluyendo el codigo tal cual lo copias del boton
   "Compartir > Insertar" de YouTube, con su width="560" height="315"
   de fabrica. No necesitas envolverlo en nada ni quitarle esos
   atributos: el CSS los reemplaza automaticamente. (Esta regla
   sustituye a una version anterior que pedia envolver el video en un
   div especial; la quité porque el código real que pegas no trae ese
   envoltorio, así que probé el código exacto que me compartiste y
   ajusté la solución a partir de eso.) */
iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    margin: 10px auto;
}


/* 4. FUENTE MONTSERRAT - CLASES OPCIONALES */
.montserrat {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
.montserrat-bold {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-weight: 700;
}
.montserrat-extra-bold {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-weight: 800;
}


/* 5. TITULOS */
h1 { font-size: 18pt; font-weight: bold; font-family: Montserrat; color: #2A2826; } /* Carbon */
h2 { font-size: 14pt; font-family: Montserrat; color: #A8420F; }                     /* Brasa */
h3 { font-size: 14pt; font-weight: bold; font-family: Montserrat; color: #2A2826; }  /* Carbon, nuevo nivel para sub-secciones */


/* 6. ENLACES */
a { text-decoration: none; color: #A8420F; font-family: Montserrat; } /* Brasa */
a:visited { color: #8C3A1E; } /* Oxido, para que no se pongan morados por defecto */
a:hover { text-decoration: underline; }


/* 7. IMAGENES (para que no se salgan del ancho del contenedor) */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}


/* 8. BARRA DE TITULO DE SECCION
   Para encabezados con fondo de color, como "Que es Cocina Exterior"
   en la pagina de inicio. Ponle esta clase a la celda (td) que
   contiene el h2, en vez de escribir bgcolor y color de fuente a mano
   cada vez. */
.barra-titulo {
    background-color: #2A2826; /* Carbon */
    text-align: center;
    padding: 10px;
}
.barra-titulo h2 {
    color: #FFFFFF;
}


/* 9. ETIQUETAS DE SECCION (Cuidado y Restauracion / Recetas)
   Usalas en una receta o guia para marcar a que seccion pertenece. */
.etiqueta-restauracion {
    background-color: #8C3A1E; /* Oxido */
    color: #FFFFFF;
    font-family: Montserrat;
    font-size: 11pt;
    padding: 3px 12px;
    border-radius: 4px;
}
.etiqueta-recetas {
    background-color: #D98A12; /* Lumbre */
    color: #2A2826;
    font-family: Montserrat;
    font-size: 11pt;
    padding: 3px 12px;
    border-radius: 4px;
}


/* 10. TEXTO SECUNDARIO (notas, pies de foto, fechas, etc.) */
.texto-secundario {
    color: #5C5856; /* Acero */
    font-size: 12pt;
}