/*
Theme Name: Chefio
Theme URI: https://chefio.eu
Author: Grupo Chefio
Author URI: https://chefio.eu
Description: Tema minimalista personalizado para Chefio — recetas, utensilios y cocina moderna.
Version: 1.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chefio
*/

/* ===================== */
/* Variables y base      */
/* ===================== */
:root {
  --max: 1100px;
  --gap: 1rem;
  --radius: 12px;
  --brand: #E23E20;
  --brand-dark: #c73a17;
  --text: #333;
  --muted: #666;
  --border: #eee;
  --bg: #FAFAFA;
  --shadow: 0 2px 10px rgba(0,0,0,.05);

  /* Altura fija del header (evita que crezca con el logo/menú) */
  --header-h: 56px; /* escritorio */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter","Segoe UI",Roboto,Arial,sans-serif;
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px dashed var(--brand); outline-offset: 2px; }

/* Contenedores */
main { max-width: var(--max); margin: 2rem auto; padding: 0 1rem; }
.container { max-width: var(--max); margin: 0 auto; padding: 1.25rem; }

/* ===================== */
/* Cabecera / Footer     */
/* ===================== */
/* Soporte para cabeceras antiguas (header, footer) */
header, footer {
  background: #fff;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border);
}
footer { border-top: 1px solid var(--border); border-bottom: 0; text-align: center; }
header h1 { margin: 0; font-size: 1.8rem; color: var(--brand); }

/* Cabecera moderna opcional (.site-header) */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #fff; border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
/* Altura fija y centrado vertical */
.site-header .header-inner{
  height: var(--header-h);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Menú principal */
.main-nav { display:flex; align-items:center; }
.main-nav .menu { list-style:none; display:flex; gap:1.1rem; padding:0; margin:0; }
.main-nav .menu > li > a {
  display:flex; align-items:center;
  height: var(--header-h);       /* evita que el enlace empuje la altura */
  line-height: 1;
  padding: 0 .6rem;              /* sin padding vertical extra */
  color:#222; font-weight:600; border-radius:8px;
}
.main-nav .menu > li > a:hover { background:#f6f6f6; text-decoration:none; }

.nav-toggle { display:none; background:none; border:none; font-size:1.6rem; line-height:1; }

/* Responsive menú */
@media (max-width: 768px) {
  :root { --header-h: 52px; } /* barra un pelín más baja en móvil */

  .main-nav { position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--border); display:none; }
  .main-nav.open { display:block; }
  .main-nav .menu { flex-direction:column; padding: .75rem 1rem; }
  .main-nav .menu > li > a{
    height:auto;              /* en desplegable no forzamos altura fija */
    padding:.7rem 0;          /* cómodo al tacto */
  }
  .nav-toggle { display:block; }
}

/* ===== Logo (tamaño controlado sin ampliar el header) ===== */
.logo, .custom-logo-link{
  display:flex; align-items:center; height: 100%;
}
.logo img, .custom-logo{
  max-height: calc(var(--header-h) - 16px); /* deja 8px de aire arriba/abajo */
  width: auto; height: auto;
  object-fit: contain;
  vertical-align: middle;
  transition: transform .2s ease;
}
/* Ajuste fino de tamaño del logo (punto medio agradable) */
@media (min-width: 769px){
  .logo img, .custom-logo{ max-height: 80px; } /* prueba 36–42px si quieres */
}
@media (max-width: 768px){
  .logo img, .custom-logo{ max-height: 36px; }
}
.logo img:hover, .custom-logo:hover { transform: scale(1.03); }

/* ===================== */
/* Botones & links       */
/* ===================== */
.btn {
  display:inline-block; background: var(--brand); color: #fff;
  padding: .7rem 1rem; border-radius: 10px; border: none; font-weight: 700;
  transition: .15s transform, .15s background;
}
.btn:hover { background: var(--brand-dark); text-decoration:none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--light { background: #fff; color:#222; border:1px solid #222; }
.link { color: #333; }

/* Chips / etiquetas pequeñas (útil para tipos) */
.chip { display:inline-block; padding:.25rem .6rem; border:1px solid #ddd; border-radius:999px; font-size:.85rem; color:#555; }

/* ===================== */
/* Home / secciones      */
/* ===================== */
.hero { background: linear-gradient(0deg,#ffffff, #fff5f2); border-bottom: 1px solid var(--border); }
.hero__inner { max-width: var(--max); margin: 0 auto; padding: 2.5rem 1rem; text-align:center; }
.hero h1 { font-size: 2rem; margin: 0 0 .5rem; color: var(--brand); }
.hero p  { margin: 0 0 1rem; color: #444; }

.section { max-width: var(--max); margin: 2rem auto; padding: 0 1rem; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .75rem; }
.section__head h2 { margin:0; }

/* ===================== */
/* Grid / Cards          */
/* ===================== */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: var(--shadow);
}
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.06); }
.card__img { width: 100%; height: 180px; object-fit: cover; display: block; background: #f2f2f2; }
@media (min-width: 1024px){ .card__img { height: 200px; } }
.pad { padding: .9rem; }
.card__title { margin: 0 0 .5rem; font-size: 1.05rem; }
.card__meta { color: var(--muted); font-size: .9rem; }

.products .price { font-weight: 700; }
.products .cta { display: inline-block; margin-top: .5rem; padding: .5rem .75rem; border: 1px solid #222; border-radius: 10px; }

/* ===================== */
/* Single / contenido    */
/* ===================== */
.single { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
.single__title { margin: .25rem 0 .25rem; font-size: 2rem; color: #222; }
.single__meta { color: var(--muted); margin-bottom: 1rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.single__figure { margin: 0 0 1rem; }
.single__img { width: 100%; height: auto; border-radius: 12px; }
.single__content p { line-height: 1.75; margin: 1rem 0; }
.single__content h2, .single__content h3 { margin-top: 1.5rem; }
.single__content ul { list-style: disc; padding-left: 1.2rem; }
.single__content ol { list-style: decimal; padding-left: 1.2rem; }
.post-nav { display:flex; justify-content:space-between; gap:.5rem; margin-top: 2rem; }
.post-nav a { display:inline-block; padding:.5rem .75rem; border:1px solid var(--border); border-radius:10px; background:#fff; }
.tags a { display:inline-block; margin:.25rem .5rem .25rem 0; padding:.25rem .6rem; border:1px solid #ddd; border-radius:999px; font-size:.85rem; }

/* ===================== */
/* Archive / listados    */
/* ===================== */
.archive__head { max-width: var(--max); margin: 1.5rem auto 0; padding: 0 1rem; }
.archive__title { font-size: 1.8rem; margin: 0 0 .25rem; color:#222; }
.archive__desc { color:var(--muted); margin: 0 0 1rem; }
.pagination { display:flex; justify-content:center; margin:1.25rem 0; gap:.25rem; flex-wrap:wrap; }
.pagination .page-numbers { margin:0; padding:.45rem .7rem; border:1px solid #ddd; border-radius:8px; background:#fff; }
.pagination .current { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ===================== */
/* Recetas: nutrición    */
/* ===================== */
.receta__nutricion {
  margin-top: 1.75rem; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem;
}
.receta__nutricion h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.nutri__grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.nutri__item {
  background: #fff8f6; border: 1px solid #ffe5df; border-radius: 10px;
  padding: .6rem .8rem; display: grid; grid-template-columns: auto auto auto; align-items: baseline; gap: .35rem;
}
.nutri__label { color: #555; font-size: .9rem; grid-column: 1 / 4; }
.nutri__value { font-size: 1.2rem; }
.nutri__unit { color: #777; }

.receta__productos { margin-top: 2rem; }
.product .cta { display:inline-block; margin-top:.5rem; padding:.5rem .75rem; border:1px solid #222; border-radius:10px; }

/* ===================== */
/* Breadcrumbs           */
/* ===================== */
.breadcrumbs { max-width:900px; margin: .5rem auto 0; padding: 0 1rem; color:#888; font-size:.9rem; }
.breadcrumbs a { color:#666; }

/* ===================== */
/* Filtros (archive)     */
/* ===================== */
.chefio-filters { background:#fff; border:1px solid var(--border); border-radius:12px; padding: .8rem; box-shadow: var(--shadow); }
.filters__row { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: .75rem; align-items: end; }
.chefio-filters label span { display:block; font-size:.9rem; color:#444; margin-bottom:.25rem; }
.chefio-filters select,
.chefio-filters input[type="search"] {
  width:100%; padding:.6rem .7rem; border:1px solid #ddd; border-radius:10px; background:#fff;
}

/* ===================== */
/* Comparativas          */
/* ===================== */
.comp-grid .comp-card { display: flex; flex-direction: column; }
.comp-card .price { font-weight: 700; margin-top: .25rem; }
.comp-card .pros, .comp-card .contras { margin: .5rem 0 0; padding-left: 1rem; }
.comp-card .pros li { color: #236e1e; }
.comp-card .contras li { color: #8a1a1a; }
.comp-card .cta { display:inline-block; margin-top:.6rem; padding:.5rem .75rem; border:1px solid #222; border-radius:10px; }

/* ===================== */
/* Formulario contacto   */
/* ===================== */
.chefio-form { background:#fff; border:1px solid var(--border); border-radius:12px; padding:1rem; box-shadow: var(--shadow); }
.chefio-form .form-row { margin-bottom:.9rem; }
.chefio-form label { display:block; margin-bottom:.35rem; color:#444; }
.chefio-form input[type="text"],
.chefio-form input[type="email"],
.chefio-form input[type="url"],
.chefio-form input[type="number"],
.chefio-form textarea {
  width:100%; padding:.7rem .8rem; border:1px solid #ddd; border-radius:10px; background:#fff;
}
.chefio-form textarea { resize: vertical; }
.chefio-form .checkbox label { display:flex; gap:.5rem; align-items:flex-start; }
.alert { padding:.75rem .9rem; border-radius:10px; border:1px solid #ddd; background:#fff; }
.alert.success { border-color:#c6f1cf; background:#f0fff3; }
.alert.error { border-color:#ffd2d2; background:#fff3f3; }

/* ===================== */
/* Utilidades            */
/* ===================== */
.hidden { display:none !important; }
.center { text-align:center; }
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}

/* ===================== */
/* Footer moderno        */
/* ===================== */
footer { background:#111; color:#fff; text-align:center; padding:1.5rem 1rem; margin-top:3rem; }
footer p { margin:.25rem 0; }
footer a { color:#FFD166; }

/* ===================== */
/* Ajustes pequeños      */
/* ===================== */
figure { margin: 0; }
hr { border:0; border-top:1px solid var(--border); margin:1.25rem 0; }

/* ===== Layout de receta: contenido + lateral ===== */
.receta-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 980px){
  .receta-grid{
    grid-template-columns: 1.25fr .75fr; /* principal + lateral */
    align-items: start;
  }
}
.muted{ color:#777; font-size:.9rem; }

/* ===== Valoración (estrellas) ===== */
.receta__rating .rating { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.receta__rating .star {
  font-size: 22px; line-height: 1; background:none; border:none; cursor:pointer;
  color:#bbb; padding:0; transition:.15s transform, .15s color;
}
.receta__rating .star:hover { transform: scale(1.1); color:#E23E20; }
.receta__rating .star.active { color:#E23E20; }
.receta__rating .rating-info { font-size:.95rem; color:#555; }
.receta__rating .rating-msg { font-size:.9rem; color:#666; min-height:1.2em; }
.receta__rating .rating--loading .rating-msg::after { content:' Registrando voto…'; }

/* ===== Plantilla Comparativa (Chefio) ===== */
.comparativa .single__title { margin-bottom:.5rem; }
.comparativa-grid {
  display:grid; gap:1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px){
  .comparativa-grid { grid-template-columns: 280px 1fr; align-items:start; }
}
.sticky-toc { position: sticky; top: 90px; }
.toc {
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:1rem;
  box-shadow: var(--shadow);
}
.toc__title { display:block; margin:0 0 .5rem; }
.toc__list { margin:0; padding-left:1rem; }
.toc__list li { margin:.25rem 0; }
.toc a { color:#333; }
.toc a:hover { text-decoration: underline; }

/* ===== Tabla comparativa (Chefio) ===== */
.comparativa__tabla .cmp-table {
  display: grid;
  border:1px solid var(--border);
  border-radius:12px;
  overflow: hidden;
  background:#fff;
  box-shadow: var(--shadow);
}
.comparativa__tabla .cmp-row {
  display:grid;
  grid-template-columns: 1.2fr .6fr 1fr 1fr 1fr .6fr .6fr;
  gap: 0;
  border-top:1px solid var(--border);
}
.comparativa__tabla .cmp-row--head {
  background:#fff5f2;
  border-top:none;
  font-weight:700;
}
.comparativa__tabla .cmp-col { padding:.8rem .9rem; border-right:1px solid var(--border); }
.comparativa__tabla .cmp-row .cmp-col:last-child { border-right:none; }

.cmp-prod { display:flex; align-items:center; gap:.75rem; }
.cmp-prod img { width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid #eee; background:#fafafa; }
.cmp-badge { background:#E23E20; color:#fff; font-size:.75rem; padding:.1rem .45rem; border-radius:6px; margin-right:.25rem; }

.cmp-list { margin:0; padding-left:1.1rem; }
.cmp-list.pros li { color:#1f6f1b; }
.cmp-list.cons li { color:#8a1a1a; }

.cmp-stars .star { color:#bbb; font-size:18px; }
.cmp-stars .star.on { color:#E23E20; }

@media (max-width: 1024px){
  .comparativa__tabla .cmp-row {
    grid-template-columns: 1.5fr .7fr 1fr 1fr 1fr .7fr .7fr;
  }
}
@media (max-width: 780px){
  /* En móvil convertimos cada fila en tarjeta */
  .comparativa__tabla .cmp-row--head { display:none; }
  .comparativa__tabla .cmp-row {
    grid-template-columns: 1fr;
    border:1px solid var(--border);
    margin-bottom:.75rem;
    border-radius:12px;
  }
  .comparativa__tabla .cmp-col { border-right:none; border-top:1px solid var(--border); }
  .comparativa__tabla .cmp-col:first-child { border-top:none; }
}

/* ===== Utensilios ===== */
.archive-utensilio .archive__title { color: var(--brand); }
.archive-utensilio .grid.products { margin-top: 2rem; }
.archive-utensilio .card__meta { font-size: .9rem; color: #666; }

/* ===== Ficha UTENSILIO ===== */
.utensilio .single__title { margin-bottom:.25rem; }
.ut-hero__row { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ut-price { font-size:1.05rem; }
.ut-box { background:#fff; border:1px solid var(--border); border-radius:12px; padding:1rem; box-shadow: var(--shadow); margin-top:1rem; }
.cmp-stars .star { color:#bbb; font-size:18px; }
.cmp-stars .star.on { color:#E23E20; }
@media (max-width: 720px){
  .ut-hero__row { flex-direction:column; align-items:flex-start; }
}

/* ===== Imagen extra en ficha de utensilio ===== */
.ut-gallery {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}
.ut-gallery__img {
  max-width: 600px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}
.ut-gallery__img:hover {
  transform: scale(1.02);
}

/* ===== Galería múltiple utensilio ===== */
.ut-gallery { margin-top: 1.5rem; }
.ut-slider { position: relative; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); padding:.5rem; }
.ut-track { position: relative; overflow: hidden; min-height: 240px; }
.ut-slide { display:none; }
.ut-slide.is-active { display:block; }
.ut-slide img { width:100%; height:auto; border-radius:10px; }

.ut-prev, .ut-next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:#fff; border:1px solid #ddd; border-radius:999px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px;
  box-shadow: var(--shadow);
}
.ut-prev { left:8px; } .ut-next { right:8px; }

.ut-thumbs { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; justify-content:center; }
.ut-thumb { background:#fff; border:1px solid #ddd; border-radius:10px; padding:2px; cursor:pointer; }
.ut-thumb img { width:72px; height:72px; object-fit:cover; border-radius:8px; display:block; }
.ut-thumb.is-active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(226,62,32,.15); }

/* ===== Galería 2 columnas (miniaturas izquierda + imagen principal) ===== */
.ut-gallery2 {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
}

.ut-gallery2__inner {
  display: grid;
  grid-template-columns: 110px minmax(0, 600px); /* ancho máximo controlado */
  gap: 1rem;
  align-items: start;
}

/* --- Panel lateral de miniaturas --- */
.ut-thumbs--side {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  position: sticky;
  top: 90px;
  max-height: 480px;          /* evita que crezca infinito */
  overflow-y: auto;           /* scroll interno */
  padding-right: .25rem;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}

.ut-thumbs--side::-webkit-scrollbar {
  width: 6px;
}
.ut-thumbs--side::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

/* Miniaturas */
.ut-thumb2 {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 2px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ut-thumb2 img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.ut-thumb2.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(226,62,32,.15);
}

/* Imagen principal */
.ut-main {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: .6rem;
  margin: 0;
  max-width: 100%;
}
.ut-main__img {
  width: 100%;
  max-height: 500px;           /* límite máximo */
  object-fit: contain;         /* mantiene proporciones */
  display: block;
  border-radius: 10px;
}

/* --- Responsive: en móvil, miniaturas abajo --- */
@media (max-width: 780px) {
  .ut-gallery2__inner {
    grid-template-columns: 1fr;
  }
  .ut-thumbs--side {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
  }
  .ut-thumb2 img {
    width: 70px;
    height: 70px;
  }
  .ut-main__img {
    max-height: 360px;
  }
}

/* Fade suave al cambiar imagen principal */
.ut-main__img { transition: opacity .25s ease; opacity: 1; }

/* ===== Newsletter ===== */
.chefio-newsletter {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 2rem 1rem;
  margin: 3rem auto;
  max-width: 500px;
  box-shadow: var(--shadow);
}
.chefio-newsletter h2 {
  margin-top: 0;
  color: var(--brand);
}
.chefio-newsletter p {
  color: #555;
  margin-bottom: 1rem;
}
.chefio-form-news {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.chefio-form-news input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: .7rem .9rem;
  border-radius: 10px;
  border: 1px solid #ddd;
}
.news-privacy {
  width: 100%;
  font-size: .85rem;
  color: #666;
  text-align: left;
  margin-top: .5rem;
}
.news-privacy input {
  margin-right: .35rem;
}

/* Avisos newsletter flotantes */
.chefio-news-alert {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: #fff;
  color: #222;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: .7rem 1rem;
  box-shadow: var(--shadow);
  z-index: 9999;
  font-size: .9rem;
}
.chefio-news-alert.success { border-color:#c6f1cf; background:#f0fff3; }
.chefio-news-alert.error   { border-color:#ffd2d2; background:#fff3f3; }
.chefio-news-alert.info    { border-color:#cbd5f5; background:#f2f4ff; }

/* ===== Artículos y guías ===== */
.archive-articulo .archive__title { color: var(--brand); }
.archive-articulo .card__meta { font-size:.9rem; color:#666; }
.articulo .single__title { margin-bottom:.5rem; }
.articulo .single__meta { font-size:.9rem; color:#777; }

/* Estilos específicos para artículos */
.contenido-indice {
    background: #f8f9fa;
    border-left: 4px solid #e23e20;
    padding: 20px;
    margin: 25px 0;
    border-radius: 0 8px 8px 0;
}

.receta-destacada {
    background: #fff8f6;
    border: 1px solid #ffe0d6;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}

.btn-receta {
    display: inline-block;
    background: #e23e20;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    margin: 10px 0;
    transition: background 0.3s ease;
}

.btn-receta:hover {
    background: #c53218;
}

.consejos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.consejo {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.tabla-comparativa {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
}

.tabla-comparativa th,
.tabla-comparativa td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.tabla-comparativa th {
    background: #2c3e50;
    color: white;
}

.tabla-comparativa tr:nth-child(even) {
    background: #f8f9fa;
}