/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}
/* --- ESTILOS PARA FORMULARIO DE CONTACTO --- */

/* Estilo para los campos de texto (input) y el área de mensaje (textarea) */
.wpcf7-form input:not([type="submit"]),
.wpcf7-form textarea {
    width: 100%; /* Ocupar todo el ancho disponible */
    padding: 12px; /* Más espacio interior para que no se vea apretado */
    border: 1px solid #dcdcdc; /* Un borde gris más suave */
    border-radius: 8px; /* Bordes redondeados, ¡clave para un look moderno! */
    background-color: #ffffff; /* Fondo blanco */
    margin-bottom: 15px; /* Espacio entre cada campo */
    box-sizing: border-box; /* Asegura que el padding no "rompa" el diseño */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
}

/* Efecto visual al hacer clic en un campo (focus) */
.wpcf7-form input:not([type="submit"]):focus,
.wpcf7-form textarea:focus {
    border-color: #4CAF50; /* Cambia el color del borde a un verde (puedes cambiarlo) */
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3); /* Sombra sutil del mismo color */
    outline: none; /* Quitar el borde azul por defecto del navegador */
}

/* Estilo del botón de envío "Enviar Mensaje" */
.wpcf7-form input[type="submit"] {
    background-color: #4CAF50; /* Un verde similar al de tu botón de WhatsApp */
    color: white; /* Texto en color blanco */
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

/* Efecto al pasar el mouse sobre el botón */
.wpcf7-form input[type="submit"]:hover {
    background-color: #45a049; /* Un verde un poco más oscuro */
}
/* --- ESTILOS PARA MÓVILES --- */
/* Todo lo que esté dentro de esta regla se aplicará solo en pantallas 
   de 768px de ancho o menos (tablets y móviles) */

@media (max-width: 768px) {

    /* Ajustamos los campos del formulario */
    .wpcf7-form input:not([type="submit"]),
    .wpcf7-form textarea {
        padding: 10px; /* Un poco menos de espacio interior */
        font-size: 15px; /* Ajustar el tamaño de la letra si es necesario */
    }

    /* Hacemos que el botón de envío ocupe todo el ancho para que sea más fácil de presionar */
    .wpcf7-form input[type="submit"] {
        width: 100%;
        padding: 14px;
    }
    
    /* --- IMPORTANTE: PARA CORREGIR LAS COLUMNAS --- */
    /* Si el formulario y la caja de WhatsApp están en columnas una al lado de la otra,
       necesitarás un código para que se apilen una encima de la otra.
       El siguiente código es un ejemplo. Puede que necesites cambiar 
       '.wp-block-columns' por la clase que usa tu tema para las columnas. */
    
    .wp-block-columns {
        flex-direction: column; /* Apila las columnas verticalmente */
    }

}
/* --- ESTILOS PARA MENÚ DE NAVEGACIÓN PROFESIONAL --- */

/* Es posible que necesites cambiar '.primary-menu a' o '.main-navigation a' 
   por el selector correcto de tu tema. Para encontrarlo, haz clic derecho
   en un enlace del menú en tu web y elige "Inspeccionar". */

.main-navigation a {
    /* --- 1. Tipografía y Texto --- */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Una fuente moderna y legible */
    text-transform: uppercase; /* Pone el texto en mayúsculas, da un look más limpio */
    font-size: 14px; /* Un tamaño de letra ligeramente más pequeño y refinado */
    font-weight: 600; /* Un poco más de grosor que el normal (semi-bold) */
    letter-spacing: 1px; /* Añade "aire" entre las letras */
    text-decoration: none; /* Quita el subrayado por defecto */
    color: #333333; /* Un gris oscuro en lugar de negro puro, se ve más suave */

    /* --- 2. Espaciado y Posición --- */
    padding: 10px 15px; /* Añade espacio alrededor de cada enlace */
    position: relative; /* Necesario para el efecto de subrayado al pasar el mouse */
    
    /* --- 3. Transición Suave --- */
    transition: color 0.3s ease; /* Hace que el cambio de color sea suave */
}

/* --- 4. Efecto al Pasar el Mouse (Hover) --- */
.main-navigation a:hover {
    color: #0056b3; /* Cambia a un azul más oscuro (puedes poner el color que quieras) */
}

/* --- 5. Efecto de Subrayado Animado al Pasar el Mouse (Opcional) --- */
.main-navigation a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0056b3; /* El mismo color que el hover */
    transform: scaleX(0); /* Empieza escondido */
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.main-navigation a:hover::after {
    transform: scaleX(1); /* Se expande al 100% */
    transform-origin: bottom left;
}

/* --- 6. Alinear Verticalmente el Menú con el Logo --- */
/* Busca la clase del contenedor del encabezado (usualmente .site-header) e inspecciónala */
.site-header {
    display: flex;
    align-items: center; /* ¡Esta es la propiedad mágica que alinea todo verticalmente! */
}