/*
Theme Name: Comercio Épico
Theme URI: https://comercioepico.com
Author: Comercio Épico
Author URI: https://comercioepico.com
Description: Tema de bloques (Full Site Editing) corporativo para Comercio Épico, consultora especializada en transformación organizacional mediante innovación tecnológica y creación de contenidos digitales. Estructura: Inicio, Servicios, Blog y Contacto. Paleta azul corporativa, tipografía Verdana.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: comercio-epico
Tags: business, block-patterns, full-site-editing, blog, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   Comercio Épico — estilos suplementarios
   La mayor parte del estilo vive en theme.json (FSE).
   Aquí solo se añaden detalles que el editor no cubre.
   ========================================================= */

:root {
  --ce-azul-oscuro: #14365C;
  --ce-azul-medio: #2E6DA4;
  --ce-azul-claro: #4A90D9;
  --ce-gris-claro: #F1F4F8;
  --ce-gris-oscuro: #3C4654;
  --ce-blanco: #FFFFFF;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Transiciones suaves en botones y enlaces */
.wp-block-button__link,
.wp-element-button {
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
  border-radius: 4px;
  letter-spacing: .2px;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(20, 54, 92, .18);
}

/* Navegación */
.wp-block-navigation a {
  transition: color .2s ease;
}
.wp-block-navigation a:hover {
  color: var(--ce-azul-claro) !important;
}

/* Encabezado oscuro + logo */
header.wp-block-group .wp-block-site-logo {
  display: flex;
  align-items: center;
}
header.wp-block-group .wp-block-site-logo img,
header.wp-block-group .custom-logo {
  height: 46px;
  width: auto;
  max-width: 240px;
}
header.wp-block-group .wp-block-navigation a {
  color: #EAF2FB;
}
header.wp-block-group .wp-block-navigation a:hover {
  color: #9FD0F5 !important;
}
/* Logo del pie sobre fondo oscuro */
footer .wp-block-site-logo img,
footer .custom-logo {
  height: 54px;
  width: auto;
}

/* Home: encabezado y héroe unidos, sin separación */
.home header.wp-block-group {
  border-bottom: 0;
}
.home main.wp-block-group {
  margin-top: 0;
}
.home main.wp-block-group > :first-child {
  margin-top: 0;
}

/* Tarjetas (servicios, posts, historia) */
.ce-card {
  background: var(--ce-blanco);
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(20, 54, 92, .06);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}
.ce-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(20, 54, 92, .14);
}

/* Ilustración dentro de tarjetas */
.ce-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 0 8px;
}
.ce-illustration svg {
  width: 96px;
  height: 96px;
}
/* Ilustraciones a color (infografía) en tarjetas del Home */
.ce-illustration--card {
  padding: 22px 0 4px;
}
.ce-illustration--card img {
  width: 100%;
  max-width: 210px;
  height: auto;
}
.ce-illustration--wide {
  padding: 0;
}
.ce-illustration--wide svg,
.ce-illustration--wide img {
  width: 100%;
  height: auto;
  max-width: 440px;
}

/* Tarjetas de blog en cuadrícula con imagen destacada */
.ce-postcard {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ce-postcard .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
}
.ce-postcard .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.ce-postcard:hover .wp-block-post-featured-image img {
  transform: scale(1.05);
}
.ce-postcard .ce-post-date {
  color: var(--ce-azul-claro);
  font-size: .8rem;
  font-weight: 700;
}
.ce-readmore a {
  font-weight: 700;
  text-decoration: none;
}
.ce-readmore a:hover {
  text-decoration: underline;
}

/* Listado de blog estándar */
.ce-blog-list .ce-blog-item {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid #E2E8F0;
}
.ce-blog-list .ce-blog-item:last-child {
  border-bottom: none;
}

/* Etiqueta superior tipo "kicker" */
.ce-kicker {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ce-azul-claro);
}

/* Formulario de contacto */
.ce-form {
  max-width: 640px;
  margin: 0 auto;
}
.ce-form .ce-field {
  margin-bottom: 18px;
  text-align: left;
}
.ce-form label {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ce-azul-oscuro);
  margin-bottom: 6px;
}
.ce-form input,
.ce-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  color: var(--ce-gris-oscuro);
  background: var(--ce-blanco);
  box-sizing: border-box;
}
.ce-form input:focus,
.ce-form textarea:focus {
  outline: none;
  border-color: var(--ce-azul-claro);
  box-shadow: 0 0 0 3px rgba(74, 144, 217, .18);
}
.ce-form button {
  background: var(--ce-azul-claro);
  color: var(--ce-blanco);
  border: none;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 700;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.ce-form button:hover {
  background: var(--ce-azul-oscuro);
  transform: translateY(-2px);
}
.ce-form-msg {
  padding: 18px 20px;
  border-radius: 10px;
  margin-bottom: 22px;
  font-size: 1rem;
  line-height: 1.5;
}
.ce-form-msg.ok {
  background: #E7F8F0;
  color: #0F5132;
  border: 1px solid #34D399;
  border-left: 5px solid #34D399;
}
.ce-form-msg.ok strong {
  display: block;
  font-size: 1.2rem;
  color: #0B7A43;
  margin-bottom: 6px;
}
.ce-form-msg.ok p {
  margin: 0;
}
.ce-form-again {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  color: var(--ce-azul-medio);
  text-decoration: none;
}
.ce-form-again:hover {
  text-decoration: underline;
}
.ce-form-msg.error {
  background: #FCE8E8;
  color: #B42318;
  border: 1px solid #F3C6C2;
  border-left: 5px solid #E5534B;
}

/* Listado de posts (Query Loop) */
.wp-block-post-title a {
  text-decoration: none;
}
.wp-block-post-title a:hover {
  color: var(--ce-azul-claro);
}

/* Responsivo: ilustraciones algo menores en móvil */
@media (max-width: 600px) {
  .ce-illustration svg { width: 80px; height: 80px; }
  .ce-illustration--card img { max-width: 180px; }
}