/* ============================================
   PRODUCCION.CSS - The Lemon Tree Education
   Estilos Globales para Elementor
   Versión: 2.1
   Fecha: Diciembre 2025
   
   ESTRUCTURA DE CARPETAS:
   /wp-content/themes/the-lemon/
   ├── style.css
   ├── functions.php
   ├── screenshot.png
   ├── readme.txt
   │
   ├── css/
   │   └── produccion.css
   │
   ├── fonts/
   │   ├── abuget/
   │   │   ├── importar.css
   │   │   └── fonts/ ................. (5 archivos)
   │   │
   │   ├── agency/ .................... (NO SE USA)
   │   │   ├── importar.css
   │   │   └── fonts/ ................. (5 archivos)
   │   │
   │   ├── barlow/
   │   │   ├── importar.css ........... (actualizar rutas a fonts/)
   │   │   └── fonts/ ................. (72 archivos)
   │   │
   │   ├── barlow-condensed/ .......... (NO SE USA)
   │   │   ├── importar.css
   │   │   └── fonts/ ................. (72 archivos)
   │   │
   │   ├── fontawesome/ ............... (sin importar.css)
   │   │
   │   ├── montserrat/
   │   │   ├── importar.css
   │   │   └── fonts/ ................. (40 archivos)
   │   │
   │   └── poppins/
   │       ├── importar.css
   │       └── fonts/ ................. (90 archivos)
   │
   └── inc/
       ├── custom-post-types.php
       ├── destinos-filter-experiencias_archive.php
       └── experiencias-field-import.php
   
   TOTAL: ~284 archivos de fuentes
   ============================================ */


/* ============================================
   PARTE 1: IMPORTAR FUENTES LOCALES
   ============================================ */

@import url('../fonts/abuget/importar.css');
@import url('../fonts/agency/importar.css');
@import url('../fonts/barlow/importar.css');
@import url('../fonts/barlow-condensed/importar.css');
@import url('../fonts/montserrat/importar.css');
@import url('../fonts/poppins/importar.css');


/* ============================================
   PARTE 2: VARIABLES CSS
   ============================================ */

:root {
    /* Colores principales */
    --tlt-amarillo: #EBBA16;
    --tlt-amarillo-claro: #EFC845;
    --tlt-negro: #1C222A;
    --tlt-gris-texto: #6A655D;
    --tlt-gris-claro: #DCDCDC;
    --tlt-blanco: #FFF;
    
    /* Tipografías */
    --tlt-font-principal: 'Montserrat', sans-serif;
    --tlt-font-titulos: 'Barlow', sans-serif;
    --tlt-font-especial: 'Abuget', cursive;
    --tlt-font-headings: 'Poppins', sans-serif;
    
    /* Tamaños de texto - FIJOS, no cambian en responsive */
    --tlt-text-base: 18px;
    --tlt-text-small: 14px;
    --tlt-text-large: 22px;
    
    /* Espaciado */
    --tlt-spacing-section: 60px;
    --tlt-spacing-element: 20px;
    
    /* Anchos */
    --tlt-max-width: 1275px;
    --tlt-max-width-wide: 1500px;
    
    /* Transiciones */
    --tlt-transition: all .35s ease-in;
    
    /* Bordes */
    --tlt-border-radius: 3px;
    --tlt-border-radius-button: 70px;
}


/* ============================================
   PARTE 3: RESET CSS
   ============================================ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

* { margin: 0; padding: 0; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1.5; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong, b { font-weight: bold; }
i, em { font-style: italic; }
a { text-decoration: none; outline: none; }

p {
    line-height: 1.5;
    margin: var(--tlt-spacing-element) 0;
}

/* Reset de listas SOLO para navegación y menús */
nav ul, nav ol,
.menu ul, .menu ol,
#menu-superior ul, #menu-superior ol,
footer ul, footer ol { 
    list-style: none; 
}

/* Restaurar listas en contenido de posts/páginas */
.entry-content ul,
.entry-content ol,
.contenido-single ul,
.contenido-single ol,
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol,
.wp-block-list {
    list-style-position: inside;
    margin: 20px 0;
    padding-left: 20px;
}

.entry-content ul,
.contenido-single ul,
.elementor-widget-theme-post-content ul {
    list-style-type: square;
}

.entry-content ol,
.contenido-single ol,
.elementor-widget-theme-post-content ol {
    list-style-type: decimal;
}

.entry-content li,
.contenido-single li,
.elementor-widget-theme-post-content li {
    margin-bottom: 10px;
    line-height: 1.6;
}


/* ============================================
   PARTE 4: ESTILOS BASE
   ============================================ */

body, html {
    width: 100%;
    max-width: 1920px;
    min-width: 350px;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-size: 18px;
    background: var(--tlt-blanco);
    font-family: var(--tlt-font-principal);
    font-weight: 300;
    color: var(--tlt-gris-texto);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: #333; }

.aligncenter { text-align: center !important; margin: 0 auto; }
img.aligncenter { margin: 0 auto; display: block; max-width: 100%; height: auto; }
.alignright { text-align: right !important; }
strong, strong > * { font-weight: bold !important; }
.cleaner { display: block !important; clear: both; }
.wp-block-image img { max-width: 100%; height: auto; }


/* ============================================
   PARTE 5: TIPOGRAFÍA - ENCABEZADOS
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* H1 */
h1,
section#principal > h1,
section#principal > section h1,
.elementor h1 {
    font-family: var(--tlt-font-principal);
    font-size: 55px;
    font-weight: bold;
    margin: 0 0 20px;
    color: var(--tlt-negro);
    line-height: 1.15;
}

/* H2 */
h2,
section#principal > h2,
section#principal > section h2,
.elementor h2 {
    font-family: var(--tlt-font-principal);
    font-size: 55px;
    font-weight: bold;
    margin: 0 0 20px;
    color: var(--tlt-negro);
    line-height: 1.15;
}

/* H3 */
h3,
section#principal > h3,
section#principal > section h3,
.elementor h3 {
    font-family: var(--tlt-font-titulos);
    font-size: 25px;
    font-weight: normal;
    margin: 30px 0 20px;
    color: var(--tlt-amarillo);
    text-transform: uppercase;
}

/* H4 */
h4,
section#principal > h4,
section#principal > section h4,
.elementor h4 {
    font-family: var(--tlt-font-principal);
    font-size: 34px;
    margin: 30px 0 20px;
    color: var(--tlt-negro);
}

/* H5 */
h5,
section#principal > h5,
section#principal > section h5,
.elementor h5 {
    font-family: var(--tlt-font-principal);
    font-size: 24px;
    margin: 0 0 20px;
    color: var(--tlt-negro);
    font-weight: 500;
}

/* H6 */
h6,
section#principal > h6,
section#principal > section h6,
.elementor h6 {
    font-family: var(--tlt-font-principal);
    font-size: 18px;
    margin: 0 0 20px;
    color: var(--tlt-negro);
    font-weight: 400;
    line-height: normal;
}


/* ============================================
   PARTE 6: CONTENIDO DE POSTS DE BLOG
   - H2 resuelto (espaciado feo)
   - Párrafos: tamaño FIJO 18px en todas las resoluciones
   ============================================ */

.contenido-single,
.entry-content,
.elementor-widget-theme-post-content {
    position: relative;
}

/* H2 en posts de blog */
.contenido-single h2,
.entry-content h2,
.elementor-widget-theme-post-content h2,
.wp-block-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: bold;
    margin: 30px 0 20px;
    color: #1C222A;
    line-height: 1.2;
    word-spacing: normal;
    letter-spacing: normal;
    text-align: left;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    max-width: 100%;
}

/* H3 en posts */
.contenido-single h3,
.entry-content h3,
.elementor-widget-theme-post-content h3 {
    font-family: 'Barlow', sans-serif;
    font-size: 25px;
    font-weight: normal;
    margin: 30px 0 20px;
    color: #EBBA16;
    text-transform: uppercase;
    word-spacing: normal;
    letter-spacing: normal;
}

/* =============================================
   PÁRRAFOS EN POSTS - TAMAÑO FIJO 18px
   NO debe cambiar en tablet ni móvil
   ============================================= */
.contenido-single p,
.entry-content p,
.elementor-widget-theme-post-content p,
.elementor-widget-text-editor p,
section#principal p,
.ancho-limitado p {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px !important;
    font-weight: 300;
    line-height: 1.6;
    color: #6A655D;
    text-align: left;
    word-spacing: normal;
    letter-spacing: normal;
}

/* Forzar 18px en TODAS las resoluciones */
@media only screen and (max-width: 1024px) {
    .contenido-single p,
    .entry-content p,
    .elementor-widget-theme-post-content p,
    .elementor-widget-text-editor p,
    section#principal p,
    .ancho-limitado p {
        font-size: 18px !important;
    }
}

@media only screen and (max-width: 767px) {
    .contenido-single p,
    .entry-content p,
    .elementor-widget-theme-post-content p,
    .elementor-widget-text-editor p,
    section#principal p,
    .ancho-limitado p {
        font-size: 18px !important;
    }
}

/* Título del post (H1 en header) */
#title {
    background-size: cover;
    background-position: center;
    background-color: #7D7D7D;
}

#title .ancho-limitado {
    min-height: 370px;
    text-align: center;
    position: relative;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
}

#title.classic {
    background-size: cover;
}

#title.classic .ancho-limitado {
    min-height: 0;
    background: transparent;
    text-align: left;
    padding: 75px 0;
}

#title h1 {
    font-weight: bold;
    color: #FFF;
    font-size: 105px;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -40%);
}

#title.classic h1 {
    position: static;
    transform: translate(0, 0);
    font-size: 50px;
    text-align: left;
    line-height: 1.15;
    word-spacing: normal;
    letter-spacing: normal;
}


/* ============================================
   PARTE 7: TIPOGRAFÍA ESPECIAL - ABUGET
   ============================================ */

.abuget,
.tlt-abuget {
    font-family: 'Abuget', cursive !important;
    font-size: 130px !important;
    font-weight: 300 !important;
    line-height: 0.8 !important;
    color: var(--tlt-amarillo) !important;
}

.titulo-especial {
    position: absolute !important;
    font-family: 'Abuget', cursive !important;
    font-size: 150px !important;
    color: var(--tlt-amarillo) !important;
    font-weight: 300 !important;
    line-height: 0.8 !important;
    z-index: 1 !important;
    margin-left: -60px !important;
    top: 0 !important;
}

.abuget-especial {
    font-family: 'Abuget', cursive !important;
    font-size: 200px !important;
    color: var(--tlt-amarillo) !important;
    font-weight: 300 !important;
    line-height: 0.8 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translate(-60px, -50%) !important;
    z-index: 2 !important;
}

.abuget-especial ~ h2 {
    position: relative !important;
    z-index: 3 !important;
    font-size: 55px !important;
}


/* ============================================
   PARTE 8: CONTENEDORES
   ============================================ */

.ancho-completo {
    width: 90%;
    margin: 0 auto;
    padding: 100px 0;
}

.ancho-limitado,
.tlt-ancho-limitado {
    width: 90%;
    max-width: 1275px;
    margin: 0 auto;
}

.ancho-limitado-full {
    width: 100%;
    margin: 0 auto;
}

section.ancho-limitado,
section > .ancho-limitado {
    padding: 60px 0;
}

section > .ancho-limitado.sin-padding {
    padding: 0;
}


/* ============================================
   PARTE 9: BOTONES
   Todos los botones llevan el símbolo »
   ============================================ */

/* Botón principal */
.tlt-boton,
a.tlt-boton,
.elementor-button,
.formulario-contacto button,
.send-button {
    display: inline-block;
    color: var(--tlt-blanco);
    font-family: var(--tlt-font-titulos);
    font-size: 20px;
    font-weight: 500;
    transition: background .35s ease-in, color .35s ease-in;
    text-align: center;
    background: var(--tlt-amarillo);
    padding: 7px 30px 18px;
    border-radius: var(--tlt-border-radius-button);
    box-sizing: border-box;
    border: none;
    line-height: 1;
    cursor: pointer;
    position: relative;
    outline: none;
}

/* El símbolo » en todos los botones */
.tlt-boton::after,
a.tlt-boton::after,
.formulario-contacto button::after,
.send-button::after {
    content: '»';
    color: var(--tlt-blanco);
    display: inline-block;
    padding-left: 5px;
    font-size: 30px;
    position: relative;
    top: 3px;
    transition: background .35s ease-in, color .35s ease-in;
}

/* Hover de botones */
.tlt-boton:hover,
a.tlt-boton:hover,
.formulario-contacto button:hover,
.send-button:hover {
    background: var(--tlt-blanco);
    color: var(--tlt-negro);
    padding: 6px 29px 17px;
    border: 1px solid var(--tlt-negro);
}

.tlt-boton:hover::after,
a.tlt-boton:hover::after,
.formulario-contacto button:hover::after,
.send-button:hover::after {
    color: var(--tlt-negro);
}

/* Botón secundario (outline) */
.tlt-boton-secundario,
.pdf-footer {
    display: inline-block;
    font-family: var(--tlt-font-titulos);
    color: var(--tlt-amarillo);
    font-size: 19px;
    padding: 10px 20px;
    text-align: center;
    background: var(--tlt-blanco);
    border-radius: 35px;
    font-weight: 600;
    box-sizing: border-box;
    transition: var(--tlt-transition);
    line-height: 24px;
}

.tlt-boton-secundario::after,
.pdf-footer::after {
    content: '»';
    display: inline-block;
    padding-left: 5px;
    color: var(--tlt-amarillo);
    transition: var(--tlt-transition);
}

.tlt-boton-secundario:hover,
.pdf-footer:hover {
    color: var(--tlt-negro);
    background: var(--tlt-amarillo);
}

.tlt-boton-secundario:hover::after,
.pdf-footer:hover::after {
    color: var(--tlt-negro);
}

.tlt-boton-negro {
    background: var(--tlt-negro);
    color: var(--tlt-blanco) !important;
}

.tlt-boton-negro:hover {
    background: #333;
}

.tlt-boton-outline {
    background: transparent;
    border: 2px solid var(--tlt-negro);
    color: var(--tlt-negro) !important;
}

.tlt-boton-outline:hover {
    background: var(--tlt-negro);
    color: var(--tlt-blanco) !important;
}


/* ============================================
   PARTE 10: FORMULARIOS
   ============================================ */

.formulario-contacto input[type="text"],
.formulario-contacto input[type="email"],
.formulario-contacto input[type="tel"],
.formulario-contacto textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    font-family: var(--tlt-font-principal);
    font-size: 16px;
    padding: 15px 20px;
    border: 1px solid var(--tlt-gris-claro);
    border-radius: var(--tlt-border-radius);
    width: 100%;
    box-sizing: border-box;
    transition: var(--tlt-transition);
}

.formulario-contacto input:focus,
.formulario-contacto textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border-color: var(--tlt-amarillo);
    outline: none;
}

.formulario-contacto input[type="submit"],
.wpcf7 input[type="submit"] {
    font-family: var(--tlt-font-titulos);
    font-size: 17px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 15px 40px;
    border-radius: var(--tlt-border-radius-button);
    background: var(--tlt-amarillo);
    color: var(--tlt-blanco);
    border: none;
    cursor: pointer;
    transition: var(--tlt-transition);
}

.formulario-contacto input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover {
    background: var(--tlt-amarillo-claro);
}

/* ============================================
   FORMULARIO DE COMENTARIOS
   ============================================ */

/* Título "Deja un comentario" */
#respond #reply-title,
.comment-respond .comment-reply-title {
    font-family: var(--tlt-font-titulos);
    font-size: 25px;
    font-weight: normal;
    color: var(--tlt-amarillo);
    text-transform: uppercase;
    margin-bottom: 20px;
}

#commentform,
.comment-form {
    font-family: var(--tlt-font-principal);
}

/* Campos de texto */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    font-family: var(--tlt-font-principal);
    font-size: 17px;
    font-weight: 300;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    margin: 10px 0 15px !important;
    border: 1px solid var(--tlt-gris-claro);
    border-radius: var(--tlt-border-radius);
    outline: none;
    transition: var(--tlt-transition);
}

/* Hover/Focus amarillo en campos */
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform input[type="url"]:focus,
#commentform textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus {
    background-color: #F9F8ED;
    border-color: var(--tlt-amarillo);
}

#commentform textarea,
.comment-form textarea {
    resize: none;
    height: 150px;
}

/* Botón de comentarios (usa button, no input) */
#commentform button[type="submit"],
.comment-form button[type="submit"],
#submit.tlt-boton {
    display: block;
    color: var(--tlt-blanco);
    font-family: var(--tlt-font-titulos);
    font-size: 20px;
    font-weight: 500;
    transition: background .35s ease-in, color .35s ease-in;
    text-align: center;
    background: var(--tlt-amarillo);
    padding: 7px 30px 18px;
    border-radius: var(--tlt-border-radius-button);
    box-sizing: border-box;
    max-width: 400px;
    border: none;
    line-height: 1;
    cursor: pointer;
    position: relative;
    outline: none;
    margin-top: 20px;
}

/* El símbolo » en el botón */
#commentform button[type="submit"]::after,
.comment-form button[type="submit"]::after {
    content: ' »';
    font-size: 30px;
    position: relative;
    top: 3px;
    padding-left: 5px;
}

/* Hover del botón */
#commentform button[type="submit"]:hover,
.comment-form button[type="submit"]:hover {
    background: var(--tlt-blanco);
    color: var(--tlt-negro);
    padding: 6px 29px 17px;
    border: 1px solid var(--tlt-negro);
}

#commentform button[type="submit"]:hover::after,
.comment-form button[type="submit"]:hover::after {
    color: var(--tlt-negro);
}

/* Lista de comentarios */
.commentlist,
.commentlist ul,
.commentlist ol {
    margin: 0 !important;
    list-style: none !important;
}

.commentlist ul,
.commentlist ol {
    margin-left: 50px !important;
}

.commentlist li {
    padding: 0 !important;
}

.commentlist .comment-body {
    background: #F2F2F2;
    padding: 30px !important;
    margin-top: 30px;
}

.comment-author img {
    border-radius: 50%;
    background: var(--tlt-blanco);
}

.comment-author .fn {
    font-family: var(--tlt-font-principal);
    font-size: 22px;
    font-weight: normal;
    color: var(--tlt-negro);
    font-style: normal;
}

.comment-metadata {
    font-size: 14px;
}

.comment-content p {
    font-size: 16px;
    margin: 10px 0 0;
}


/* ============================================
   PARTE 11: UTILIDADES
   ============================================ */

.scrollToHead {
    position: fixed;
    z-index: 1000;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--tlt-blanco);
    display: none;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);
    transition: var(--tlt-transition);
}

.scrollToHead.scrolled { display: flex; opacity: 1; }
.scrollToHead::after {
    content: "\f106";
    font-family: 'FontAwesome';
    color: #999;
    font-size: 34px;
    position: relative;
    top: -3px;
    transition: var(--tlt-transition);
}
.scrollToHead:hover { background: var(--tlt-amarillo); }
.scrollToHead:hover::after { color: var(--tlt-blanco); }


/* ============================================
   PARTE 12: RESPONSIVE
   NOTA: NO se reduce tamaño de texto
   Solo ajustes de layout
   ============================================ */

@media only screen and (max-width: 1024px) {
    .ancho-limitado, .tlt-ancho-limitado { width: 95%; }
}

@media only screen and (max-width: 767px) {
    .ancho-limitado, .tlt-ancho-limitado { width: 95%; }
    .scrollToHead { bottom: 20px; right: 20px; width: 40px; height: 40px; }
    .scrollToHead::after { font-size: 28px; }
}

@media only screen and (max-width: 1500px) {
    #title h1,
    #title.cabecera-larga h1 {
        font-size: 85px;
    }
}


/* ============================================
   FIN DEL ARCHIVO
   ============================================ */