/*
 * Sistema final de tarjetas.
 * Capa cargada al final: normaliza sólo los grupos de tarjetas existentes.
 */

/* Base compartida: una única superficie marfil, borde violeta y sombra suave. */
body #contenido :is(
  .ho-service-card,
  .service-detail-card,
  .service-package,
  .package-subservice,
  .service-card.about-value-card,
  .detail-block,
  .contact-needs-grid > li.contact-need-card
){
  color:#211D25;
  border:1px solid rgba(94,53,129,.30);
  border-radius:20px;
  background-color:#F6F3E9;
  background-image:none;
  transform:translateY(0);
  box-shadow:0 10px 24px rgba(33,29,37,.12);
  transition:transform 170ms ease,background-color 170ms ease,border-color 170ms ease,box-shadow 170ms ease,color 170ms ease;
}

/* Anula únicamente las clases históricas que alternaban el tono de una tarjeta. */
body #contenido :is(
  .service-detail-card.service-tone-1,
  .service-detail-card.service-tone-2,
  .service-detail-card.service-tone-3,
  .service-package.package-tone-1,
  .service-package.package-tone-2,
  .service-package.package-tone-3,
  .service-package.package-tone-4,
  .about-values-grid .about-value-card:nth-child(2),
  .ho-services-track > li:first-child .ho-service-card,
  .contact-needs-grid > li.contact-need-card:first-child,
  .contact-needs-grid > li.contact-need-card:nth-child(6),
  .detail-section--dark .detail-block,
  .service-detail-page--dark .detail-section--light .detail-block
){
  color:#211D25;
  border-color:rgba(94,53,129,.30);
  background-color:#F6F3E9;
  background-image:none;
  box-shadow:0 10px 24px rgba(33,29,37,.12);
}

/* Tipografía de tarjeta: títulos violeta y contenido carbón, siempre opaco. */
body #contenido :is(
  .ho-service-card,
  .service-detail-card,
  .service-package,
  .package-subservice,
  .service-card.about-value-card,
  .detail-block,
  .contact-needs-grid > li.contact-need-card
) :is(h3,h4,.package-price,.price,.plan){
  color:#5E3581;
  opacity:1;
  transition:color 170ms ease;
}

body #contenido :is(
  .ho-service-card,
  .service-detail-card,
  .service-package,
  .package-subservice,
  .service-card.about-value-card,
  .detail-block,
  .contact-needs-grid > li.contact-need-card
) :is(p,li,.contact-need-text,.ho-card-link){
  color:#211D25;
  opacity:1;
  transition:color 170ms ease;
}

body #contenido :is(
  .ho-service-card,
  .service-detail-card,
  .service-package,
  .package-subservice,
  .service-card.about-value-card,
  .detail-block
) li::marker{
  color:#5E3581;
  transition:color 170ms ease;
}

body #contenido :is(.service-package .package-heading,.service-package .package-conditions){
  border-color:rgba(94,53,129,.30);
}

/* Los índices e iconos mantienen contraste alto: marfil sobre violeta. */
body #contenido :is(
  .card-index,
  .service-detail-index,
  .package-index,
  .detail-block-index,
  .ho-service-number,
  .contact-need-icon
){
  color:#F6F3E9;
  border-color:#5E3581;
  background-color:#5E3581;
  opacity:1;
}

/* El SVG de necesidad se conserva como icono de trazo con currentColor. */
body #contenido .contact-need-icon svg{
  stroke:currentColor;
}

/* Igualdad por fila sin alturas fijas ni recorte de contenido. */
body #contenido :is(
  .services-cards,
  .service-packages-grid,
  .about-values-grid,
  .detail-blocks,
  .contact-needs-grid
){
  align-items:stretch;
  grid-auto-rows:1fr;
}

body #contenido :is(
  .services-cards > .service-detail-card,
  .service-packages-grid > .service-package,
  .about-values-grid > .service-card.about-value-card,
  .detail-blocks > .detail-block,
  .contact-needs-grid > li.contact-need-card
){
  height:100%;
}

/* El carrusel de Inicio conserva todos sus enlaces como superficies completas. */
body #contenido .ho-services-track{
  align-items:stretch;
  grid-auto-rows:1fr;
}

body #contenido .ho-services-track > li{
  display:flex;
  min-height:0;
}

body #contenido .ho-services-track > li > .ho-service-card{
  display:flex;
  width:100%;
  height:100%;
}

/* Los paquetes sostienen la acción al final de la tarjeta, incluso con textos nuevos. */
body #contenido .service-package{
  display:flex;
  flex-direction:column;
}

body #contenido .service-package .package-action{
  margin-top:auto;
}

/* La opción de Contacto conserva la superficie completa del enlace sin depender de JS. */
body #contenido .contact-needs-grid > li.contact-need-card{
  display:flex;
  padding:0;
}

body #contenido .contact-needs-grid > li.contact-need-card > .contact-need-option{
  display:flex;
  width:100%;
  min-height:100%;
  align-items:center;
  padding:24px;
  color:#211D25;
  text-decoration:none;
  transition:color 170ms ease;
}

body #contenido .contact-needs-grid > li.contact-need-card > .contact-need-option:focus-visible{
  outline:3px solid #211D25;
  outline-offset:-6px;
}

/* Botones primarios no heredan el cambio de superficie de su tarjeta. */
body #contenido :is(
  .ho-service-card,
  .service-detail-card,
  .service-package,
  .package-subservice,
  .service-card.about-value-card,
  .detail-block,
  .contact-needs-grid > li.contact-need-card
) .button.primary,
body #contenido :is(
  .ho-service-card,
  .service-detail-card,
  .service-package,
  .package-subservice,
  .service-card.about-value-card,
  .detail-block,
  .contact-needs-grid > li.contact-need-card
) .button.primary:hover,
body #contenido :is(
  .ho-service-card,
  .service-detail-card,
  .service-package,
  .package-subservice,
  .service-card.about-value-card,
  .detail-block,
  .contact-needs-grid > li.contact-need-card
) .button.primary:focus-visible{
  color:#211D25;
  border-color:#5E3581;
  background-color:#B27AF4;
}

/* Foco de teclado y hover comparten respuesta; el movimiento al pasar sólo existe con puntero fino. */
body #contenido :is(
  .ho-service-card,
  .service-detail-card,
  .service-package,
  .package-subservice,
  .service-card.about-value-card,
  .detail-block,
  .contact-needs-grid > li.contact-need-card
):focus-within{
  color:#211D25;
  border-color:#5E3581;
  background-color:#B27AF4;
  box-shadow:0 14px 30px rgba(33,29,37,.20);
  transform:translateY(-3px);
}

body #contenido :is(
  .ho-service-card,
  .service-detail-card,
  .service-package,
  .package-subservice,
  .service-card.about-value-card,
  .detail-block,
  .contact-needs-grid > li.contact-need-card
):focus-within :is(p,h3,h4,li,.package-price,.price,.plan,.contact-need-text,.ho-card-link){
  color:#211D25;
  opacity:1;
}

body #contenido :is(
  .ho-service-card,
  .service-detail-card,
  .service-package,
  .package-subservice,
  .service-card.about-value-card,
  .detail-block
):focus-within li::marker{
  color:#211D25;
}

@media (hover:hover) and (pointer:fine){
  body #contenido :is(
    .ho-service-card,
    .service-detail-card,
    .service-package,
    .package-subservice,
    .service-card.about-value-card,
    .detail-block,
    .contact-needs-grid > li.contact-need-card
  ):hover{
    color:#211D25;
    border-color:#5E3581;
    background-color:#B27AF4;
    box-shadow:0 14px 30px rgba(33,29,37,.20);
    transform:translateY(-3px);
  }

  body #contenido :is(
    .ho-service-card,
    .service-detail-card,
    .service-package,
    .package-subservice,
    .service-card.about-value-card,
    .detail-block,
    .contact-needs-grid > li.contact-need-card
  ):hover :is(p,h3,h4,li,.package-price,.price,.plan,.contact-need-text,.ho-card-link){
    color:#211D25;
    opacity:1;
  }

  body #contenido :is(
    .ho-service-card,
    .service-detail-card,
    .service-package,
    .package-subservice,
    .service-card.about-value-card,
    .detail-block
  ):hover li::marker{
    color:#211D25;
  }
}

/* La selección de Contacto persiste sin sombreado oscuro y muestra su estado de confirmación. */
body #contenido .contact-needs-grid > li.contact-need-card[data-selected="true"],
body #contenido .contact-needs-grid > li.contact-need-card:has(.contact-need-option[aria-current="true"]){
  color:#211D25;
  border:2px solid #5E3581;
  outline:2px solid #5E3581;
  outline-offset:3px;
  background-color:#B27AF4;
  box-shadow:0 14px 30px rgba(33,29,37,.20);
}

body #contenido .contact-needs-grid > li.contact-need-card[data-selected="true"] :is(p,h3,li,.contact-need-text),
body #contenido .contact-needs-grid > li.contact-need-card:has(.contact-need-option[aria-current="true"]) :is(p,h3,li,.contact-need-text){
  color:#211D25;
  opacity:1;
}

body #contenido .contact-needs-grid > li.contact-need-card[data-selected="true"] .contact-option-indicator,
body #contenido .contact-needs-grid > li.contact-need-card:has(.contact-need-option[aria-current="true"]) .contact-option-indicator{
  color:#211D25;
  border-color:#211D25;
  opacity:1;
}

body #contenido .contact-needs-grid > li.contact-need-card[data-selected="true"] .contact-option-indicator svg,
body #contenido .contact-needs-grid > li.contact-need-card:has(.contact-need-option[aria-current="true"]) .contact-option-indicator svg{
  display:block;
}

@media (prefers-reduced-motion:reduce){
  body #contenido :is(
    .ho-service-card,
    .service-detail-card,
    .service-package,
    .package-subservice,
    .service-card.about-value-card,
    .detail-block,
    .contact-needs-grid > li.contact-need-card
  ),
  body #contenido :is(
    .ho-service-card,
    .service-detail-card,
    .service-package,
    .package-subservice,
    .service-card.about-value-card,
    .detail-block,
    .contact-needs-grid > li.contact-need-card
  ) *{
    transition:none !important;
    animation:none !important;
  }

  body #contenido :is(
    .ho-service-card,
    .service-detail-card,
    .service-package,
    .package-subservice,
    .service-card.about-value-card,
    .detail-block,
    .contact-needs-grid > li.contact-need-card
  ):focus-within,
  body #contenido :is(
    .ho-service-card,
    .service-detail-card,
    .service-package,
    .package-subservice,
    .service-card.about-value-card,
    .detail-block,
    .contact-needs-grid > li.contact-need-card
  ):hover,
  body #contenido .ho-service-card:hover .ho-service-image img{
    transform:none !important;
  }
}