/* =============================================================
   Del Campo — bloques de la portada
   Se carga solo en la página de inicio.
   ============================================================= */

/* ---------- Franja de cifras ----------
   La genera el shortcode [dc_cifras], con datos leídos de la
   base de datos y cacheados 12 horas. */
.dc-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#DCE4E1;
  border:1px solid #DCE4E1;border-radius:14px;overflow:hidden;max-width:1160px;margin:0 auto;
  box-shadow:0 1px 2px rgba(37,65,68,.05),0 14px 34px -22px rgba(37,65,68,.4);
  font-family:"DM Sans",system-ui,-apple-system,sans-serif}
.dc-cifras > div{background:#fff;padding:18px 20px}
.dc-cifras b{display:block;font-size:26px;font-weight:800;color:#007236;letter-spacing:-.02em;line-height:1.15}
.dc-cifras span{display:block;font-size:12.5px;color:#5D716E;margin-top:5px;line-height:1.35}
@media(max-width:900px){.dc-cifras{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.dc-cifras{grid-template-columns:1fr}}

/* ---------- «Seis líneas, un solo lugar» ---------- */
.dc-lin-sec{max-width:1160px;margin:0 auto;padding:8px 22px 10px;
  font-family:"DM Sans",system-ui,-apple-system,sans-serif;color:#254144;text-align:left}
.dc-lin-head{max-width:640px;margin:0 0 30px}
.dc-lin-head .eyebrow{font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:600;color:#007236;display:block;margin-bottom:10px}
.dc-lin-head h2{font-size:clamp(24px,3.2vw,33px);line-height:1.15;letter-spacing:-.02em;
  font-weight:700;margin:0 0 10px;color:#254144;text-transform:none}
.dc-lin-head p{font-size:16px;line-height:1.6;color:#5D716E;margin:0}
.dc-lineas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dc-linea{background:#fff;border:1px solid #DCE4E1;border-radius:16px;padding:22px;
  text-decoration:none;display:block;position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.dc-linea:hover,.dc-linea:focus-visible{transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(37,65,68,.05),0 14px 34px -18px rgba(37,65,68,.45);border-color:var(--lc)}
.dc-linea::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--lc);opacity:0;transition:opacity .18s}
.dc-linea:hover::after,.dc-linea:focus-visible::after{opacity:1}
/* Las insignias de la marca traen su propio círculo y su propio color,
   así que aquí no va ni fondo teñido ni radio: se dibujaría una caja
   detrás de una figura que ya es redonda. Van a 66px y no a los 44 del
   icono anterior porque cada insignia lleva el nombre de la línea
   escrito alrededor del anillo y por debajo de ese tamaño se convierte
   en una mancha.

   El alt va vacío a propósito: el <h3> de la tarjeta ya dice el nombre
   de la línea, y la insignia lo repite. Con texto alternativo, un
   lector de pantalla lo leería dos veces seguidas.

   El color de línea (--lc) no se pierde: sigue mandando en el filo
   izquierdo al pasar el cursor, en el borde de la tarjeta y en el
   «Ver línea →». */
.dc-linea .ic{width:66px;height:66px;display:block;margin-bottom:12px}
.dc-linea .ic img{width:100%;height:100%;object-fit:contain;display:block}
.dc-linea h3{font-size:18px;font-weight:700;margin:0 0 6px;color:#254144;
  letter-spacing:-.01em;text-transform:none}
.dc-linea p{font-size:14px;line-height:1.55;color:#5D716E;margin:0}
.dc-linea .go{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--lct);
  display:flex;align-items:center;gap:6px}
@media(max-width:900px){.dc-lineas-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dc-lineas-grid{grid-template-columns:1fr}
  .dc-lin-sec{padding-left:16px;padding-right:16px}}

/* ---------- «Lo más nuevo en el portafolio» ----------
   La cuadrícula de productos la genera el shortcode [products]
   de WooCommerce y hereda el estilo de tarjeta de sitio.css. */
.dc-nov-wrap{max-width:1160px;margin:0 auto;padding:0 22px 6px;
  font-family:"DM Sans",system-ui,-apple-system,sans-serif}
.dc-nov-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;flex-wrap:wrap;margin-bottom:26px}
.dc-nov-head .eyebrow{font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:600;color:#007236;display:block;margin-bottom:10px}
.dc-nov-head h2{font-size:clamp(24px,3.2vw,33px);line-height:1.15;letter-spacing:-.02em;
  font-weight:700;margin:0;color:#254144;text-transform:none}
.dc-nov-head a{display:inline-flex;align-items:center;gap:8px;border:1px solid #DCE4E1;
  border-radius:999px;padding:12px 20px;font-weight:600;font-size:14.5px;color:#254144;
  text-decoration:none;background:transparent;transition:border-color .15s,transform .15s}
.dc-nov-head a:hover{border-color:#007236;color:#007236;transform:translateY(-1px)}
@media(max-width:600px){.dc-nov-wrap{padding-left:16px;padding-right:16px}}

/* ---------- «La venta empieza en la parcela» ---------- */
.dc-aseso-wrap{max-width:1160px;margin:0 auto;padding:0 22px;
  font-family:"DM Sans",system-ui,-apple-system,sans-serif}
.dc-aseso{background:#254144;color:#EEF3F2;border-radius:22px;padding:46px;
  display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.dc-aseso .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:#9BC31E;display:block}
.dc-aseso h2{color:#fff;font-size:clamp(24px,3vw,34px);line-height:1.15;
  letter-spacing:-.02em;font-weight:700;margin:12px 0 0;text-transform:none}
.dc-aseso > div > p{color:#A3B5B2;margin:12px 0 0;font-size:16px;line-height:1.6}
.dc-aseso ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.dc-aseso li{display:flex;gap:11px;font-size:15px;align-items:flex-start;line-height:1.5}
.dc-aseso li svg{flex-shrink:0;margin-top:3px}
.dc-aseso li b{color:#fff;font-weight:700}
.dc-aseso li span span{color:#A3B5B2;font-size:14px}
.dc-aseso .btns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.dc-aseso .btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;
  padding:13px 22px;font-weight:600;font-size:14.5px;text-decoration:none;
  transition:transform .15s ease,filter .15s ease}
.dc-aseso .btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.dc-aseso .btn-brote{background:#9BC31E;color:#17292B}
.dc-aseso .btn-light{background:rgba(255,255,255,.12);color:#EEF3F2;border:1px solid rgba(255,255,255,.22)}
@media(max-width:900px){.dc-aseso{grid-template-columns:1fr;padding:32px;gap:30px}
  .dc-aseso-wrap{padding:0 16px}}

/* ---------- Bloque destacado: YaraLiva NITRABOR ----------
   La sección ya traía dos columnas propias; se veía apilada por los
   estilos de la plantilla. Aquí solo se ajustan tipografía, color y
   ritmo, sin mover ningún widget.

   Se presenta como tarjeta blanca con borde, igual que la ficha de
   sala de ventas: mismo borde, mismo radio. El fondo y el radio van
   en .elementor-container y no en la sección, porque la sección es de
   ancho completo y la tarjeta no debe serlo.

   Elementor escribe el padding de esta sección con tres clases
   (.elementor-11334 .elementor-element.elementor-element-c7a4b22),
   así que aquí hacen falta cuatro para ganar sin recurrir a !important
   ni a escribir el ID de la página en la hoja de estilos. Sin esto el
   texto queda pegado al borde, sobre todo en celular.

   Lo mismo con el ancho: Elementor declara
   .elementor-section.elementor-section-boxed > .elementor-container
   {max-width:1400px} en una hoja que se imprime DESPUES de esta. Con
   la misma especificidad gana la suya por orden, asi que el selector
   de la tarjeta lleva .elementor-section-boxed como cuarta clase. */
.elementor-section.elementor-element.elementor-element-c7a4b22.cms-banner-main{
  background:transparent;padding:58px 22px;margin-bottom:0}
.elementor-element-c7a4b22.cms-banner-main.elementor-section-boxed > .elementor-container{
  background:#fff;border:1px solid #DCE4E1;border-radius:18px;padding:46px;
  box-shadow:0 1px 2px rgba(37,65,68,.05),0 16px 38px -22px rgba(37,65,68,.45);
  /* 1116 = 1160 del envoltorio menos sus 22px de padding a cada lado.
     Es el mismo borde exterior que la tarjeta de asesoría, para que
     las dos queden alineadas al pixel. */
  max-width:1116px;margin:0 auto;box-sizing:border-box}
/* Tipografía. Los widgets traían ajustes propios del tema de demo: el
   titular en Marcellus (serif) a peso 400, y todo el texto en #808080.
   Esos ajustes se BORRARON en Elementor en vez de taparse aquí con
   !important, así que estas reglas ya no pelean con nada y el bloque
   usa la misma escala que el resto de la portada. */
.elementor-element-c7a4b22 .elementor-element-235dbb7 .elementor-heading-title::before{
  content:"Producto destacado";display:block;font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;font-weight:600;color:#007236;margin-bottom:10px}
.elementor-element-c7a4b22 .elementor-element-235dbb7 .elementor-heading-title{
  font-size:clamp(25px,3.2vw,34px);font-weight:700;line-height:1.15;
  letter-spacing:-.02em;color:#254144;margin:0 0 14px;text-transform:none}
.elementor-element-c7a4b22 .elementor-element-0b9b945 .elementor-heading-title{
  display:block;font-size:16px;font-weight:400;line-height:1.65;
  letter-spacing:0;color:#5D716E;margin:0 0 20px}
.elementor-element-c7a4b22 .elementor-icon-list-items{display:grid;gap:10px}
.elementor-element-c7a4b22 .elementor-icon-list-item{align-items:flex-start;margin:0}
.elementor-element-c7a4b22 .elementor-icon-list-icon{margin-top:2px}
.elementor-element-c7a4b22 .elementor-icon-list-icon svg{width:17px;height:17px}
.elementor-element-c7a4b22 .elementor-icon-list-text{
  font-size:15.5px;line-height:1.55;color:#3E5250}
/* El widget de cierre traia un ancho propio de 208% escrito en la
   pagina: en celular medía 483px dentro de una tarjeta de 242px y el
   texto quedaba cortado. Elementor lo declara con tres clases, asi que
   aqui hacen falta cuatro para ganarle. */
.elementor-element-c7a4b22.cms-banner-main .elementor-element.elementor-element-428e2bc{max-width:100%}
/* La nota de cierre se separa como recuadro: sobre fondo blanco, sin
   un tono propio, se leía como un párrafo más. */
.elementor-element-c7a4b22 .elementor-element-428e2bc .elementor-heading-title{
  display:block;font-size:15.5px;font-weight:600;line-height:1.5;color:#254144;
  background:#F4F8F5;border-left:4px solid #9BC31E;border-radius:0 12px 12px 0;
  padding:16px 20px}
/* ---------- Rejilla del bloque ----------
   La plantilla traía dos columnas fijas: todo el texto a la izquierda y
   el vídeo a la derecha, lo que dejaba el titular estrangulado a media
   tarjeta y el vídeo pegado arriba en una columna vacía.

   Se rehace como rejilla de dos columnas sobre el contenedor interno:

     fila 1   titular, a todo el ancho
     fila 2   descripción (izq)   |  beneficios (der)
     fila 3   nota de aplicación  |     "     "
     fila 4   vídeo, a todo el ancho

   Las columnas de Elementor y sus envoltorios pasan a display:contents
   para que los widgets sean hijos directos de la rejilla; así se puede
   colocar cada uno donde toca sin mover nada en el editor. El orden
   visual coincide con el orden del documento, de modo que un lector de
   pantalla y el tabulador recorren el bloque en el mismo orden que se
   ve. Por debajo de 900px todo cae a una sola columna. */
.elementor-element-c7a4b22 .elementor-element-92163ba > .elementor-container{
  display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:24px;
  align-items:start}
.elementor-element-c7a4b22 .elementor-element-92163ba > .elementor-container > .elementor-column,
.elementor-element-c7a4b22 .elementor-element-92163ba .elementor-column > .elementor-widget-wrap{
  display:contents}
.elementor-element-c7a4b22 .elementor-element-235dbb7{grid-column:1/-1;grid-row:1}
.elementor-element-c7a4b22 .elementor-element-0b9b945{grid-column:1;grid-row:2}
.elementor-element-c7a4b22 .elementor-element-56ab2db{grid-column:2;grid-row:2/span 2}
.elementor-element-c7a4b22 .elementor-element-428e2bc{grid-column:1;grid-row:3;align-self:start}
.elementor-element-c7a4b22 .elementor-element-4ff99e0{grid-column:1/-1;grid-row:4}
/* El vídeo es 848x480: a los 1116px de la tarjeta mediría 628px de
   alto y se comería la sección. Ocupa su fila entera pero el
   reproductor se limita a 820px y se centra. Elementor escribe el
   ancho de los widgets con tres clases, así que aquí van cuatro. */
.elementor-element-c7a4b22.cms-banner-main .elementor-element.elementor-element-4ff99e0{
  max-width:820px;width:100%;margin-left:auto;margin-right:auto}
@media(max-width:900px){
  .elementor-element-c7a4b22 .elementor-element-92163ba > .elementor-container{
    grid-template-columns:1fr;row-gap:18px}
  .elementor-element-c7a4b22 .elementor-element-235dbb7,
  .elementor-element-c7a4b22 .elementor-element-0b9b945,
  .elementor-element-c7a4b22 .elementor-element-56ab2db,
  .elementor-element-c7a4b22 .elementor-element-428e2bc,
  .elementor-element-c7a4b22 .elementor-element-4ff99e0{grid-column:1;grid-row:auto}
}
.elementor-element-c7a4b22 .elementor-element-4ff99e0 .elementor-wrapper{
  border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(37,65,68,.05),0 14px 32px -20px rgba(37,65,68,.45)}
@media(max-width:900px){
  .elementor-section.elementor-element.elementor-element-c7a4b22.cms-banner-main{padding:40px 16px}
  .elementor-element-c7a4b22.cms-banner-main.elementor-section-boxed > .elementor-container{padding:26px;border-radius:16px}}

/* ---------- «Del campo hondureño desde 1994» ---------- */
/* minmax(0,1fr) y no 1fr: «1fr» tiene un mínimo automático igual al
   ancho máximo del contenido, y la tabla de la ficha —con th sin
   partir y un correo largo e indivisible— no bajaba de 398px. En un
   celular de 375px la columna se desbordaba y el tema la recortaba:
   el teléfono de ventas y el correo quedaban cortados a la derecha,
   invisibles. Con minmax(0,...) la columna sí puede encoger. */
.dc-nos{max-width:1160px;margin:0 auto;padding:0 22px;
  font-family:"DM Sans",system-ui,-apple-system,sans-serif;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px;align-items:center}
.dc-nos .eyebrow{font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:600;color:#007236;display:block}
.dc-nos h2{font-size:clamp(25px,3.2vw,34px);line-height:1.15;letter-spacing:-.02em;
  font-weight:700;color:#254144;margin:10px 0 0;text-transform:none}
.dc-nos > div > p{color:#5D716E;margin:14px 0 0;font-size:16px;line-height:1.65}
.dc-nos .ficha{min-width:0;background:#fff;border:1px solid #DCE4E1;border-radius:18px;padding:26px;
  box-shadow:0 1px 2px rgba(37,65,68,.05),0 16px 38px -22px rgba(37,65,68,.45)}
.dc-nos .ficha h3{font-size:20px;font-weight:700;color:#254144;margin:10px 0 12px;
  letter-spacing:-.01em;text-transform:none}
.dc-nos .ficha > p{font-size:14.5px;color:#5D716E;line-height:1.6;margin:0}
/* table-layout:fixed obliga a respetar el 38% de la primera columna
   en vez de dejar que el contenido dicte el ancho. */
.dc-nos table{width:100%;table-layout:fixed;border-collapse:collapse;
  margin-top:16px;font-size:14.5px}
.dc-nos th{text-align:left;font-weight:600;color:#5D716E;padding:9px 12px 9px 0;
  border-bottom:1px solid #EAEFED;white-space:nowrap;vertical-align:top;width:38%}
.dc-nos td{padding:9px 0;border-bottom:1px solid #EAEFED;color:#254144;
  vertical-align:top;overflow-wrap:anywhere}
.dc-nos tr:last-child th,.dc-nos tr:last-child td{border-bottom:0}
.dc-nos td a{color:#007236;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(0,114,54,.28)}
.dc-nos td a:hover{border-bottom-color:#007236}
.dc-nos .btns{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.dc-nos .btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 20px;
  font-weight:600;font-size:14.5px;text-decoration:none;transition:transform .15s ease,filter .15s ease}
.dc-nos .btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.dc-nos .btn-primary{background:#007236;color:#fff;border:0}
.dc-nos .btn-ghost{background:transparent;color:#254144;border:1px solid #DCE4E1}
.dc-nos .btn-ghost:hover{border-color:#007236;color:#007236}
@media(max-width:900px){.dc-nos{grid-template-columns:minmax(0,1fr);gap:28px;padding:0 16px}}
/* En pantalla estrecha «Lunes a viernes» tiene que poder partirse. */
@media(max-width:520px){.dc-nos th{white-space:normal;width:42%}}

/* ---------- ¿Quiénes Somos? ----------
   Antes: título, párrafo y una sola imagen plana de 2560px en la que
   misión, visión, valores y política venían dibujados dentro. Ese texto
   no se podía leer con un lector de pantalla, no lo indexaba ningún
   buscador y en celular se veía a 490px de ancho, ilegible.

   Ahora son cuatro tarjetas de verdad, con el texto en HTML tomado del
   documento de la empresa, y la imagen queda solo como cierre. */
.dc-qs{max-width:1160px;margin:0 auto;padding:0 22px;
  font-family:"DM Sans",system-ui,-apple-system,sans-serif}

.dc-qs-head{text-align:center;max-width:760px;margin:0 auto 30px}
.dc-qs-orn{display:flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:14px}
.dc-qs-orn i{display:block;width:54px;height:1px;background:#C6D5A8}
.dc-qs-orn svg{width:22px;height:22px;flex:0 0 auto}
.dc-qs h2{font-size:clamp(28px,3.8vw,40px);line-height:1.1;letter-spacing:-.02em;
  font-weight:700;color:#007236;margin:0;text-transform:none}
.dc-qs-head p{font-size:16px;line-height:1.65;color:#5D716E;margin:14px 0 0}

.dc-qs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dc-qs-card{background:#fff;border:1px solid #DCE4E1;border-radius:16px;
  padding:26px 22px 24px;text-align:center;
  box-shadow:0 1px 2px rgba(37,65,68,.05),0 14px 30px -24px rgba(37,65,68,.45)}
.dc-qs-card .ico{display:inline-flex;align-items:center;justify-content:center;
  width:66px;height:66px;border-radius:50%;margin-bottom:14px}
.dc-qs-card .ico svg{width:28px;height:28px}
/* Dos tonos alternos, como en la referencia. Allí el segundo era
   morado; aquí va el cian de la paleta secundaria de la marca. */
.dc-qs-card .ico-a{background:#E8F2E9;color:#007236}
.dc-qs-card .ico-b{background:#E2F4FB;color:#0089B0}
.dc-qs-card h3{font-size:18px;font-weight:700;color:#254144;margin:0;
  letter-spacing:-.01em;text-transform:none;line-height:1.25}
.dc-qs-card .dash{display:block;width:26px;height:3px;border-radius:2px;
  background:#9BC31E;margin:10px auto 12px}
.dc-qs-card p{font-size:14.5px;line-height:1.6;color:#5D716E;margin:0}

.dc-qs-banner{margin-top:26px;border-radius:18px;overflow:hidden;
  min-height:250px;display:flex;align-items:center;
  /* El encuadre vertical se fija al 14%: con «cover» y una foto de
     2400x1135 en una banda de 5:1, el centro por defecto le cortaba la
     cabeza al agricultor. */
  background:url(../img/campo-banner.jpg) 50% 22%/cover no-repeat}
/* La foto se aclara hacia la derecha; el degradado sostiene el texto
   sin tapar el cultivo. */
.dc-qs-banner .txt{width:100%;padding:34px 40px;
  background:linear-gradient(90deg,rgba(20,58,38,.94) 0%,rgba(20,58,38,.86) 15%,
    rgba(20,58,38,.42) 34%,rgba(20,58,38,0) 58%)}
.dc-qs-banner .line{display:block;width:44px;height:3px;border-radius:2px;
  background:#fff;margin-bottom:16px}
.dc-qs-banner .claim{margin:0;line-height:1.12}
.dc-qs-banner .claim strong{display:block;font-size:clamp(26px,3.4vw,38px);
  font-weight:700;color:#fff;letter-spacing:-.02em}
.dc-qs-banner .claim span{display:block;font-size:clamp(24px,3.2vw,36px);
  font-weight:600;color:#9BC31E;letter-spacing:-.02em}
.dc-qs-banner .orn-b{justify-content:flex-start;margin:16px 0 0}
.dc-qs-banner .orn-b i{width:46px;background:rgba(255,255,255,.45)}

@media(max-width:980px){
  .dc-qs-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .dc-qs{padding:0 16px}
  .dc-qs-banner{min-height:220px}
  .dc-qs-banner .txt{padding:28px 26px}
}
@media(max-width:560px){
  .dc-qs-grid{grid-template-columns:1fr}
  .dc-qs-card{padding:22px 20px 20px}
  /* En pantalla estrecha el degradado horizontal dejaría el texto sobre
     la parte clara de la foto: aquí cubre de arriba abajo. */
  .dc-qs-banner .txt{background:linear-gradient(180deg,rgba(20,58,38,.9) 0%,rgba(20,58,38,.62) 52%,rgba(20,58,38,.2) 100%)}
  .dc-qs-banner{min-height:200px}
}

/* ---------- Mascota en la tarjeta de asesoría ----------
   La tarjeta ya venía llena: texto a la izquierda, lista a la derecha
   y ni un hueco sobrante. Superponer la mascota pisaba la lista en
   todos los anchos probados, así que se le da columna propia. Se
   alinea al fondo y se saca con margen negativo para que quede de pie
   sobre el borde inferior en vez de flotar en el centro.

   Las poses se cambian al pasar el cursor por la tarjeta entera, no
   por la mascota: la mascota tiene pointer-events:none y de todos
   modos es un blanco pequeño. En móvil no hay hover y se queda en la
   pose que señala los botones, que es la que interesa. */
.dc-aseso{grid-template-columns:1.35fr 1fr 140px;gap:36px}
.dc-masc-aseso{align-self:end;width:168px;margin:0 -28px -46px 0}
.dc-aseso:hover .dc-masc-aseso .p1{opacity:0}
.dc-aseso:hover .dc-masc-aseso .p2{opacity:1}
/* Entre 900 y 1180 se achica: a tamaño completo estrangulaba el texto
   y obligaba a los dos botones a apilarse. */
@media(max-width:1180px){
  .dc-aseso{grid-template-columns:1.3fr 1fr 112px;gap:30px;padding:38px}
  .dc-masc-aseso{width:136px;margin:0 -24px -38px 0}
}
/* Por debajo de 900 la tarjeta pasa a una columna y la mascota queda
   al pie, alineada a la derecha, con margen superior negativo para no
   costar una pantalla entera de scroll en celular. */
@media(max-width:900px){
  .dc-aseso{grid-template-columns:1fr;gap:26px;padding:32px}
  .dc-masc-aseso{width:104px;margin:-34px -10px -32px auto}
}
/* Por debajo de 600 la última línea de la lista llega hasta el borde
   derecho: sin este ajuste la mascota se le encimaba. */
@media(max-width:600px){.dc-masc-aseso{margin-top:0}}
@media(max-width:420px){.dc-masc-aseso{width:96px}}

/* ---------- Separador entre secciones ----------
   Sustituye a dos widgets que traía la plantilla: uno pintaba una barra
   verde neón con animación y sombra de resplandor, el otro repetía el
   logo. Además los dos definían la misma clase .separador con estilos
   distintos, así que se pisaban entre sí.

   En su lugar, una línea fina en los verdes de marca que se desvanece
   en los extremos, alineada al mismo ancho de contenido que las
   tarjetas para que los bordes coincidan. */
/* El separador ocupaba 106px de alto: 52px de margen a cada lado más
   los 2 de la línea. Separaba demasiado las secciones. Ahora el margen
   es fluido y el bloque nunca pasa de 50px en total:
     1440px -> 24 + 2 + 24 = 50
      900px -> 23 + 2 + 23 = 48
      375px -> 12 + 2 + 12 = 26
   El clamp evita tener que fijar saltos por punto de ruptura: en
   celular encoge solo y el ritmo vertical se mantiene. */
.dc-sep{max-width:1160px;margin:clamp(12px,2.6vw,24px) auto;padding:0 22px}
/* El desvanecido se hace con máscara y NO con degradado de fondo.
   Elementor trae una optimización de carga diferida que imprime
   «background-image:none !important» sobre todo lo que hay dentro de
   un contenedor .e-con todavía no visible; el segundo separador vive
   en uno de esos y su degradado desaparecía hasta que el visitante
   llegaba a esa altura. El color va como background-color, que esa
   regla no toca, y la máscara dibuja el desvanecido. Si un navegador
   no soporta máscaras, se ve la línea entera: degrada bien. */
.dc-sep hr{border:0;height:2px;margin:0;border-radius:2px;
  background-color:#007236;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
@media(max-width:900px){.dc-sep{padding:0 16px}}