/* ==========================================================================
   CantArte · Hoja de estilos de marca
   Se carga DESPUÉS de bootstrap, main.css y responsive.css, por lo que
   sobrescribe el diseño anterior sin tocar el HTML ni los scripts.

   Paleta
     Marfil     #FAF7F2  fondo general
     Papel      #FFFFFF  tarjetas
     Arena      #F1EBE1  secciones alternas
     Tinta      #2B1F2E  cabecera, pie, texto de títulos (negro vino)
     Granate    #5E2B40  botones y enlaces
     Oro        #86652F  detalles sobre claro (texto)
     Oro claro  #C9A66B  detalles sobre oscuro
   Tipografía
     Cormorant Garamond  títulos (serif de contraste, aire de partitura)
     Jost                texto, menú y botones
   ========================================================================== */

:root {
  --ink: #2b1f2e;
  --ink-soft: #3d2f41;
  --plum: #5e2b40;
  --plum-dark: #451e2f;
  --gold: #86652f;
  --gold-light: #c9a66b;
  --ivory: #faf7f2;
  --paper: #ffffff;
  --sand: #f1ebe1;
  --line: #e3d9ca;
  --text: #3b3239;
  --muted: #6e636b;

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
/* Bootstrap 3 fija html{font-size:10px}. Aquí se establece el tamaño real:
   todo el texto se calcula a partir de este valor (1rem). Para agrandar o
   reducir TODA la web basta con cambiar estos dos números. */
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
@media (max-width: 767px) { html { font-size: 17px; } }

body,
body.homepage {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold-light); color: var(--ink); }

body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

body h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 500; }
body h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
body h3, body .h3 { font-size: 1.35rem; }
body h4 { font-size: 1.15rem; font-weight: 600; }

body p, body li { font-size: 1rem; }
body strong, body b { font-weight: 500; color: var(--ink); }

body a { color: var(--plum); text-decoration: none; transition: color .2s ease; }
body a:hover, body a:focus { color: var(--gold); text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Barra superior ---------- */
body .top-bar {
  background: var(--ink);
  border: 0;
  padding: 6px 0;
  font-family: var(--font-body);
}
body .top-bar .top-number p,
body .top-bar .top-number a { color: var(--gold-light); font-size: .95rem; letter-spacing: .04em; margin: 0; }
body .top-bar .top-number a:hover { color: #fff; }
body .top-bar .social-share li a { color: var(--gold-light); transition: color .2s ease; }
body .top-bar .social-share li a:hover { color: #fff; background: transparent; }

/* ---------- Navegación ---------- */
body .navbar,
body .navbar-inverse {
  background: var(--ivory);
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
/* Logo (SVG): su altura se controla con --logo-h */
:root { --logo-h: 100px; }
body .navbar-inverse { min-height: 0; }
body .navbar-brand { height: auto; padding: 8px 15px; display: block; }
body .navbar-brand img {
  display: block;
  height: var(--logo-h) !important;
  width: auto !important;
  max-width: none !important;
}
@media (min-width: 768px) {
  /* centra verticalmente los enlaces respecto al logo */
  body .navbar-inverse .navbar-nav > li > a {
    line-height: 22px;
    padding-top: calc((var(--logo-h) + 16px - 22px) / 2);
    padding-bottom: calc((var(--logo-h) + 16px - 22px) / 2);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  :root { --logo-h: 76px; }
  body .navbar-inverse .navbar-nav > li > a { padding-left: 9px; padding-right: 9px; font-size: .88rem; letter-spacing: .03em; }
}
@media (max-width: 767px) {
  :root { --logo-h: 64px; }
  body .navbar-brand { padding: 6px 15px; }
  body .navbar-inverse .navbar-toggle { margin-top: 21px; margin-bottom: 21px; }
}

body .navbar-inverse .navbar-nav > li > a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .98rem;
  letter-spacing: .06em;
  color: var(--ink);
  background: transparent;
  text-transform: none;
  transition: color .2s ease, box-shadow .2s ease;
}
body .navbar-inverse .navbar-nav > li > a:hover,
body .navbar-inverse .navbar-nav > li > a:focus {
  color: var(--plum);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--gold-light);
}
body .navbar-inverse .navbar-nav > .active > a,
body .navbar-inverse .navbar-nav > .active > a:hover,
body .navbar-inverse .navbar-nav > .active > a:focus,
body .navbar-inverse .navbar-nav > .open > a,
body .navbar-inverse .navbar-nav > .open > a:hover,
body .navbar-inverse .navbar-nav > .open > a:focus {
  color: var(--plum);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--gold);
}

body .navbar-inverse .dropdown-menu {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 0;
  box-shadow: 0 12px 28px rgba(43, 31, 46, .12);
  padding: 6px 0;
}
body .navbar-inverse .dropdown-menu > li > a {
  font-family: var(--font-body);
  color: var(--ink);
  letter-spacing: .03em;
  padding: 9px 20px;
}
body .navbar-inverse .dropdown-menu > li > a:hover,
body .navbar-inverse .dropdown-menu > li > a:focus,
body .navbar-inverse .dropdown-menu > .active > a {
  background: var(--sand);
  color: var(--plum);
  box-shadow: none;
}

body .navbar-inverse .navbar-toggle { border: 1px solid var(--line); border-radius: 2px; background: transparent; }
body .navbar-inverse .navbar-toggle:hover,
body .navbar-inverse .navbar-toggle:focus { background: var(--sand); }
body .navbar-inverse .navbar-toggle .icon-bar { background: var(--ink); }
body .navbar-inverse .navbar-collapse { border-color: var(--line); }

@media (max-width: 767px) {
  body .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: var(--ink); }
  body .navbar-inverse .navbar-nav > li > a:hover,
  body .navbar-inverse .navbar-nav > .active > a { box-shadow: inset 3px 0 0 var(--gold); }
}

/* ---------- Portada: slider ---------- */
/* (no se redefine position: main.css apila las diapositivas en absoluto) */
#main-slider .carousel-inner .item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(43, 31, 46, .86) 0%, rgba(43, 31, 46, .58) 48%, rgba(43, 31, 46, .12) 100%);
}
#main-slider .carousel-inner .item .container { position: relative; z-index: 1; }

#main-slider .carousel-content { text-align: left; }
#main-slider .carousel-content h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.05;
  color: #fbf5ea;
  text-transform: none;
  letter-spacing: 0;
  text-shadow: none;
}
#main-slider .carousel-content p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: #eadfd0;
  max-width: 32em;
}
#main-slider .btn-slide {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .08em;
  color: #fbf5ea;
  background: transparent;
  border: 1px solid var(--gold-light);
  border-radius: 0;
  padding: .75em 2.2em;
  transition: background .25s ease, color .25s ease;
}
#main-slider .btn-slide:hover,
#main-slider .btn-slide:focus { background: var(--gold-light); color: var(--ink); }

#main-slider .carousel-indicators li { border-color: var(--gold-light); background: transparent; }
#main-slider .carousel-indicators li.active { background: var(--gold-light); }

/* ---------- Secciones ---------- */
#feature, #about-us, #contact-page, #content, #blog, #error, #partner,
#conatcat-info, #google-map {
  background: var(--ivory);
  padding-top: 72px;
  padding-bottom: 72px;
}
#conatcat-info { background: var(--sand); }
#partner { background: var(--sand); }

/* Títulos de página */
body .center { text-align: center; }
body .center h1 { margin-top: 0; margin-bottom: .35em; text-wrap: balance; }
body .center h2 { text-wrap: balance; }

/* Pentagrama: pequeño detalle musical bajo el título principal */
body .center > h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 13px;
  margin: 18px auto 6px;
  background: repeating-linear-gradient(to bottom, var(--gold-light) 0 1px, transparent 1px 3px);
  opacity: .9;
}

/* Subtítulo bajo el h1 (CantArte, Música para tu Boda, Libro de visitas…) */
body .center > h1 + h2 {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--gold);
  margin-top: 0;
}

/* Sobrescribe el gris que cada página fijaba en línea */
body #feature h1, body #about-us h1, body #error h1, body #blog h1 { color: var(--ink); }

body .lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 1em;
}
body .center .lead { max-width: 46em; margin-left: auto; margin-right: auto; }
body .lead strong, body .lead b { font-weight: 500; }

body .location-highlight {
  background: transparent;
  color: var(--plum);
  font-weight: 500;
  padding: 0;
  border-bottom: 1px solid var(--gold-light);
}

/* ---------- Tarjetas de contenido ---------- */
body .feature-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-light);
  border-radius: 0;
  box-shadow: none;
  padding: 28px 26px;
  margin-bottom: 30px;
  text-align: left;
}
body .feature-wrap h2 { font-size: 1.3rem; margin-top: 0; }
body .feature-wrap h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1.2em; }
body .feature-wrap ul { padding-left: 1.1em; }
body .feature-wrap li { margin-bottom: .5em; }

body .single-profile-top,
body .single-profile-bottom {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 20px;
  margin-bottom: 26px;
}
body .single-profile-top h4,
body .single-profile-bottom h4 { font-size: 1.3rem; margin-top: 0; }
body .media-object,
body .media > .pull-left img {
  border-radius: 0;
  border: 1px solid var(--line);
  padding: 4px;
  background: var(--paper);
}
body .media-body p { font-size: .98rem; }

/* Bodas de ejemplo y preguntas frecuentes */
body .boda-ejemplo { border-left: 2px solid var(--gold-light); padding-left: 20px; }
body .boda-ejemplo .fecha { color: var(--muted); font-family: var(--font-body); }
body .faq-item h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink); }
body .faq-section { border-top: 1px solid var(--line); }

/* ---------- Botones ---------- */
body .btn,
body .btn-primary,
body .btn-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .98rem;
  letter-spacing: .06em;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
body .btn-primary,
body .btn-primary:active {
  background: var(--plum);
  border: 1px solid var(--plum);
  color: #fbf5ea;
  padding: .6em 1.7em;
}
body .btn-primary:hover,
body .btn-primary:focus {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold-light);
}
body .btn-lg { padding: .75em 2.2em; }

/* WhatsApp: se mantiene el verde reconocible, con forma acorde al resto */
body .whatsapp-button {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .04em;
  border-radius: 2px;
  padding: 8px 18px;
}

/* Botón "Dejar opinión en Google" (tenía estilo en línea azul) */
a[style*="1a73e8"] {
  background: var(--plum) !important;
  border-radius: 0 !important;
  font-family: var(--font-body);
  letter-spacing: .06em;
  padding: 11px 26px !important;
  color: #fbf5ea !important;
  transition: background .25s ease;
}
a[style*="1a73e8"]:hover { background: var(--ink) !important; color: var(--gold-light) !important; }

/* ---------- Libro de visitas ---------- */
body .media.reply_section { max-width: 820px; margin: 0 auto; }
body .post_reply_content {
  display: block;
  width: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-light);
  padding: 22px 28px 14px;
  margin-bottom: 22px;
}
body .post_reply_content .h3,
body .post_reply_content p.h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 .4em;
}
body .post_reply_content .h3 strong { font-weight: 600; }
body .post_reply_content .lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
body .post_reply_content .lead i { font-style: italic; }
body .post_reply_content .lead a {
  font-family: var(--font-body);
  font-size: .9rem;
  font-style: normal;
  letter-spacing: .04em;
}

/* ---------- Vídeo ---------- */
body .video iframe { border: 0; background: var(--ink); max-width: 100%; }
body .video { margin-bottom: 14px; }

/* ---------- Formulario ---------- */
body .contact-wrap label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .04em;
  color: var(--ink);
}
body .form-control {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  height: auto;
  padding: 11px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body textarea.form-control { height: auto; }
body .form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 166, 107, .28);
}

/* ---------- Pestañas, galerías y otros módulos de la portada ---------- */
body .tab-content { background: var(--paper); border: 1px solid var(--line); border-radius: 0; }
body .img-circle { border: 1px solid var(--line); padding: 3px; background: var(--paper); }
body .testimonial-inner, body .testimonial { border-radius: 0; }
body .widget h3 { font-size: 1.25rem; }

/* ---------- Mapa ---------- */
body .gmap-area { border: 1px solid var(--line); }

/* ---------- Pie de página ---------- */
body #footer,
body #footer.midnight-blue {
  background: var(--ink);
  color: #cdbfc9;
  border-top: 2px solid var(--gold);
  padding: 44px 0 36px;
  font-size: .95rem;
  line-height: 1.8;
}
body #footer strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: #fbf5ea;
  letter-spacing: .02em;
}
body #footer a { color: var(--gold-light); }
body #footer a:hover, body #footer a:focus { color: #fff; }
body #footer ul { list-style: none; margin: 0; padding: 0; }
body #footer ul.pull-right li { display: inline-block; margin-left: 20px; }
body #footer ul.pull-right li a { letter-spacing: .04em; }

@media (max-width: 767px) {
  body #footer .pull-right { float: none !important; margin-top: 18px; }
  body #footer ul.pull-right li { margin: 0 18px 4px 0; }
  #feature, #about-us, #contact-page, #content, #blog, #error, #partner,
  #conatcat-info, #google-map { padding-top: 48px; padding-bottom: 48px; }
  body .post_reply_content { padding: 18px 20px 10px; }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; }
}


/* ==========================================================================
   Ajustes de la portada (index)
   ========================================================================== */

/* Carrusel: altura controlada y sin márgenes que dejen huecos debajo */
#main-slider,
#main-slider .carousel,
#main-slider .carousel-inner {
  margin: 0;
  padding: 0;
}
#main-slider .carousel-inner .item {
  height: clamp(380px, 60vh, 540px);
  min-height: 0;
  padding: 0;
  background-size: cover;
  background-position: center;
}
#main-slider .carousel-inner .item > .container { height: 100%; }
#main-slider .carousel-inner .item .slide-margin {
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
#main-slider .carousel-inner .item .slide-margin::before,
#main-slider .carousel-inner .item .slide-margin::after { display: none; }
#main-slider .carousel .carousel-content { margin: 0; padding: 0; }

/* Primera sección tras el carrusel: separación moderada */
#main-slider + #feature,
#main-slider ~ #feature:first-of-type { padding-top: 56px; margin-top: 0; }

/* Comentarios del Libro de Visitas (portada): el logo como sello circular */
body .testimonial-inner .img-circle,
body .tab-content .media > .pull-left img[src$="logo.svg"] {
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 9px;
  box-sizing: border-box;
}
body .testimonial-inner .img-circle { width: 70px; height: 70px; border-radius: 50%; }
body .tab-content .media > .pull-left img[src$="logo.svg"] { width: 120px; height: auto; padding: 12px; }
body .testimonial-inner .media-body span { font-size: .92rem; color: var(--muted); }


/* ==========================================================================
   Correcciones tras revisar main.css
   (main.css usa selectores más específicos; aquí se igualan o superan)
   ========================================================================== */

/* --- Carrusel: botón, flechas e indicadores (antes en rojo) --- */
#main-slider .carousel .btn-slide {
  background: transparent;
  border: 1px solid var(--gold-light);
  border-radius: 0;
  padding: .7em 2.2em;
  margin-top: 22px;
  color: #fbf5ea;
}
#main-slider .carousel .btn-slide:hover,
#main-slider .carousel .btn-slide:focus { background: var(--gold-light); color: var(--ink); }

#main-slider .prev,
#main-slider .next {
  background-color: rgba(43, 31, 46, .55);
  border: 1px solid var(--gold-light);
  border-radius: 0;
  color: #fbf5ea;
}
#main-slider .prev:hover,
#main-slider .next:hover { background-color: var(--gold-light); color: var(--ink); }

#main-slider .carousel-indicators li:after { border-color: var(--gold-light); }
#main-slider .carousel-indicators li.active {
  background-color: var(--gold-light);
  border: 1px solid var(--gold-light);
}
#main-slider .carousel-indicators li.active:after {
  background: transparent;
  border: 1px solid var(--gold-light);
}

/* --- Cabecera: main.css añadía relleno y márgenes pensados para el menú antiguo --- */
body .navbar-inverse { padding: 0; }
body .navbar-inverse .navbar-nav { margin-top: 0; margin-bottom: 0; }
body .navbar-inverse .navbar-nav > li { margin-left: 0; padding-bottom: 0; }
body .navbar-inverse .navbar-nav > li > a {
  display: block;
  border-radius: 0;
  padding-left: 14px;
  padding-right: 14px;
}
@media (min-width: 768px) and (max-width: 991px) {
  body .navbar-inverse .navbar-nav > li > a { padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 767px) {
  body .navbar-inverse .navbar-nav > li > a { padding-top: 12px; padding-bottom: 12px; line-height: 22px; }
}

/* --- Desplegable "Bodas": main.css lo pintaba oscuro con texto blanco --- */
body .navbar-inverse .navbar-nav .dropdown-menu {
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 0;
  box-shadow: 0 12px 28px rgba(43, 31, 46, .12);
  padding: 6px 0;
}
body .navbar-inverse .navbar-nav .dropdown-menu > li > a {
  color: var(--ink);
  padding: 9px 20px;
  border-radius: 0;
}
body .navbar-inverse .navbar-nav .dropdown-menu > li:hover > a,
body .navbar-inverse .navbar-nav .dropdown-menu > li:focus > a,
body .navbar-inverse .navbar-nav .dropdown-menu > li.active > a {
  background-color: var(--sand);
  color: var(--plum);
}

/* --- Barra superior: iconos sociales --- */
body .top-bar ul.social-share li a {
  background: rgba(201, 166, 107, .14);
  color: var(--gold-light);
  border-radius: 0;
}
body .top-bar ul.social-share li a:hover { background: var(--gold-light); color: var(--ink); }

/* --- Títulos centrados: main.css fijaba 36 px --- */
body .center h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: .6em; }
body .center > h1 + h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
body #error h1 { text-transform: none; }

/* --- Formulario: main.css ponía relleno y borde casi invisibles --- */
body .form-group .form-control,
body .form-control {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 0;
}
body .form-group .form-control:focus,
body .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 166, 107, .28); }

/* --- Pestañas de la portada --- */
body .nav-tabs { border-right: 1px solid var(--line); }
body .nav-tabs > li { border-bottom: 1px solid var(--line); }
body .nav-tabs > li > a {
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-body);
  border-radius: 0;
  padding: 13px 18px;
}
body .nav-tabs > li > a:hover,
body .nav-tabs > li.active > a,
body .nav-tabs > li.active > a:hover,
body .nav-tabs > li.active > a:focus {
  background: var(--ink);
  color: #fbf5ea;
  border: 0;
}
body .nav-tabs > li.active > a:after { border-left-color: var(--ink); }
body .tab-wrap { border-color: var(--line); background: var(--paper); }
body .tab-content h2 { font-size: 1.4rem; }

/* --- Bloque de vídeo (antes con imagen de fondo y texto blanco) --- */
body #partner { color: var(--text); background: var(--sand); }
body #partner h2, body #partner h3 { color: var(--ink); }

/* --- Bloque "¿Tienes alguna pregunta?" --- */
body .contact-info,
body .contact-info h2 { color: var(--ink); }
body .contact-info i { background: var(--plum); border-radius: 50%; }

/* --- Pie: iconos y enlaces --- */
body #footer .fa { color: var(--gold-light); }

/* ==========================================================================
   Portada: cuadrícula de tarjetas sin huecos
   Con flotados, la tarjeta de preguntas frecuentes (muy alta) dejaba un vacío
   enorme bajo las tarjetas vecinas. Con grid, cada fila toma la altura de su
   tarjeta más alta y las preguntas ocupan todo el ancho en dos columnas.
   ========================================================================== */
body .features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 0 15px;
  margin: 0;
}
body .features > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
  min-width: 0;
}
body .features .feature-wrap { height: 100%; margin-bottom: 0; }

@media (min-width: 768px) and (max-width: 991px) {
  body .features { grid-template-columns: repeat(2, 1fr); }
  body .features > div:nth-child(5) { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  body .features { grid-template-columns: repeat(3, 1fr); }
  body .features > div:nth-child(4) { grid-column: span 2; }
}
/* Preguntas frecuentes: ancho completo y dos columnas de lectura */
body .features > div:last-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  body .features > div:last-child .feature-wrap { column-count: 2; column-gap: 56px; }
}
body .features > div:last-child .feature-wrap h2 { column-span: all; margin-bottom: .8em; }
body .features > div:last-child .feature-wrap h3 { break-after: avoid; margin-top: 0; }
body .features > div:last-child .feature-wrap p { break-inside: avoid; margin-bottom: 1.2em; }

/* Segunda sección "#feature" (solo contiene el botón de WhatsApp) */
body #conatcat-info + #feature { padding-top: 0; padding-bottom: 48px; }
body #conatcat-info + #feature .center { padding-bottom: 0; }

/* Bloque "¿Tienes alguna pregunta?" + WhatsApp: una sola franja compacta */
body #conatcat-info { padding-top: 44px; padding-bottom: 8px; }
body #conatcat-info + #feature { background: var(--sand); padding-bottom: 44px; }