/* ==========================================================================
   Renuevo Digital · Tema «Amarillo» (PRUEBA · v2, amarillo moderado)
   Se carga DESPUÉS de estilos.css. Solo cambia colores: no toca estructura,
   tamaños ni contenido. Base blanca y gris muy claro; negro para texto,
   íconos y un solo bloque (CTA); amarillo solo como acento.
   ========================================================================== */

:root {
  --amarillo: #ffc20e;
  --amarillo-hover: #ffd23f;
  --amarillo-prof: #e6a800;
  --amarillo-suave: #fff6d6;
  --negro: #111111;
  --negro-2: #1c1c1c;
  --gris-claro: #f6f6f4;
  --gris-medio: #ececea;

  --tinta: #111111;
  --tinta-2: #1c1c1c;
  --superficie: #1c1c1c;
  --texto: #111111;
  --texto-suave: #55534f;
  --linea: #e8e8e5;
  --claro: #f6f6f4;
  --niebla: #ececea;
  --marino: #111111;
  --marino-prof: #0b0b0b;
  --marca: #111111;
  --marca-2: #111111;
  --menta: #e6a800;
  --degradado: linear-gradient(115deg, #ffc20e 0%, #ffd23f 100%);
  --degradado-texto: linear-gradient(100deg, #111 0%, #111 100%);
  --sombra-suave: 0 24px 50px -32px rgba(17, 17, 17, 0.25);
}

::selection {
  background: rgba(255, 194, 14, 0.4);
}

:focus-visible {
  outline-color: #111111;
}

/* --------------------------------------------------------------------------
   Encabezado
   -------------------------------------------------------------------------- */

.encabezado.es-fijo .menu-escritorio__enlace,
.encabezado--solido .menu-escritorio__enlace {
  color: var(--texto-suave);
}

.encabezado.es-fijo .menu-escritorio__enlace:hover,
.encabezado.es-fijo .menu-escritorio__enlace.activo,
.encabezado--solido .menu-escritorio__enlace:hover,
.encabezado--solido .menu-escritorio__enlace.activo {
  color: var(--negro);
  background: var(--gris-claro);
  box-shadow: inset 0 -2px 0 var(--amarillo);
}

/* «Hablemos» del encabezado en negro */
.encabezado .boton--marca {
  background: var(--negro);
  color: var(--blanco);
  box-shadow: 0 14px 30px -18px rgba(17, 17, 17, 0.6);
}

.encabezado .boton--marca:hover {
  background: #2a2a2a;
  color: var(--blanco);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

/* Principal: amarillo con texto negro (la acción más importante) */
.boton--marca {
  background: var(--amarillo);
  color: var(--negro);
  box-shadow: 0 14px 30px -18px rgba(230, 168, 0, 0.8);
}

.boton--marca:hover {
  background: var(--amarillo-hover);
  color: var(--negro);
}

/* Secundario sólido: negro */
.boton--oscuro {
  background: var(--negro);
  color: var(--blanco);
  box-shadow: 0 14px 30px -18px rgba(17, 17, 17, 0.6);
}

.boton--oscuro:hover {
  background: #2a2a2a;
  color: var(--blanco);
}

.boton--contorno {
  border-color: #cfcfcb;
  background: var(--blanco);
  color: var(--negro);
}

.boton--contorno:hover {
  border-color: var(--negro);
  background: var(--blanco);
  color: var(--negro);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background: radial-gradient(55% 60% at 88% 0%, #fff8e0 0%, rgba(255, 255, 255, 0) 70%), var(--blanco);
}

.hero__fondo::before {
  background-image: linear-gradient(to right, rgba(17, 17, 17, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 17, 0.04) 1px, transparent 1px);
}

.aurora--1 {
  background: radial-gradient(circle, rgba(255, 194, 14, 0.35), transparent 68%);
}

.aurora--2 {
  background: radial-gradient(circle, rgba(17, 17, 17, 0.12), transparent 70%);
}

.aurora--3 {
  background: radial-gradient(circle, rgba(255, 194, 14, 0.18), transparent 70%);
}

.pildora {
  border-color: var(--linea);
  background: var(--blanco);
  color: var(--negro);
}

.pildora__punto {
  background: var(--amarillo);
  box-shadow: 0 0 0 4px rgba(255, 194, 14, 0.22);
}

.hero__titulo {
  color: var(--negro);
}

/* «crecer tu marca»: negro con subrayado tipo marcador amarillo (delgado) */
.degradado-texto {
  color: var(--negro);
  -webkit-text-fill-color: var(--negro);
  background: linear-gradient(transparent 72%, var(--amarillo) 72%, var(--amarillo) 90%, transparent 90%);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__micro .icono {
  color: var(--amarillo-prof);
}

/* Panel del hero: neutro, con detalles amarillos */
.panel-proyecto {
  border-color: var(--linea);
  box-shadow: 0 40px 80px -50px rgba(17, 17, 17, 0.35);
}

.panel-proyecto__puntos span:first-child {
  background: var(--negro);
}

.panel-proyecto__puntos span:nth-child(2) {
  background: var(--amarillo);
}

.panel-proyecto__puntos span:nth-child(3) {
  background: #d9d9d5;
}

.panel-proyecto__cuerpo {
  background: var(--gris-claro);
}

.panel-proyecto__estado,
.panel-proyecto__chip {
  color: var(--negro);
}

.panel-proyecto__estado::before {
  background: var(--amarillo);
}

.panel-proyecto__chip {
  background: var(--amarillo);
}

.panel-proyecto__registro time {
  color: #8d8b86;
}

.panel-proyecto__registro .icono {
  color: var(--negro);
}

.flotante__icono {
  background: var(--negro);
  color: var(--amarillo);
}

/* --------------------------------------------------------------------------
   Tira de tecnologías: gris muy claro
   -------------------------------------------------------------------------- */

.tira {
  border-color: var(--linea);
  background: var(--gris-claro);
}

.tira__titulo {
  color: var(--texto-suave);
}

.tira__item {
  color: var(--negro);
}

.tira__item::after {
  background: var(--amarillo);
}

.tira__icono {
  background: var(--negro);
  color: var(--blanco);
}

/* --------------------------------------------------------------------------
   Secciones y etiquetas
   -------------------------------------------------------------------------- */

.etiqueta {
  color: var(--negro);
}

.etiqueta::before {
  background: var(--amarillo);
  height: 3px;
}

.seccion--servicios {
  background: var(--blanco);
}

.seccion--clara {
  background: var(--gris-claro);
}

/* Íconos de servicios: negro con trazo amarillo */
.tarjeta-servicio__icono,
.mini-servicio__icono {
  background: var(--negro);
  color: var(--amarillo);
}

.mini-servicio:hover,
.destino:hover {
  border-color: var(--negro);
  box-shadow: var(--sombra-suave);
}

.mini-servicio:hover > .icono {
  color: var(--negro);
}

.enlace-servicio {
  color: var(--negro);
  text-decoration: underline;
  text-decoration-color: var(--amarillo);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.lista-chequeo .icono {
  color: var(--amarillo-prof);
}

/* Beneficios: amarillo muy suave */
.beneficio__icono {
  background: var(--amarillo-suave);
  color: var(--negro);
}

.destino__etiqueta {
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   CTA final: único bloque negro, con botón amarillo
   -------------------------------------------------------------------------- */

.cta-final {
  background: linear-gradient(155deg, #1c1c1c, #0b0b0b 62%);
  color: var(--blanco);
}

.cta-final .etiqueta {
  color: var(--amarillo) !important;
}

.cta-final .etiqueta::before {
  background: var(--amarillo);
}

.cta-final__titulo {
  color: var(--blanco);
}

.cta-final__texto {
  color: rgba(255, 255, 255, 0.72);
}

.cta-final .boton--marca {
  background: var(--amarillo);
  color: var(--negro);
  box-shadow: 0 14px 30px -16px rgba(255, 194, 14, 0.5);
}

.cta-final .boton--marca:hover {
  background: var(--amarillo-hover);
  color: var(--negro);
}

.cta-final .boton--contorno {
  border-color: transparent;
  background: var(--blanco);
  color: var(--negro);
}

/* --------------------------------------------------------------------------
   Pie: gris claro con línea amarilla fina
   -------------------------------------------------------------------------- */

.pie {
  border-top: 3px solid var(--amarillo);
  background: var(--gris-claro);
}

.pie__titulo {
  color: var(--negro);
}

.pie__dato .icono {
  color: var(--negro);
}

.pie__lista a:hover,
.pie__base a:hover {
  color: var(--negro);
  text-decoration: underline;
  text-decoration-color: var(--amarillo);
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Menú móvil: negro con acentos amarillos
   -------------------------------------------------------------------------- */

.menu-movil {
  background: var(--negro);
}

.menu-movil__enlace .icono {
  color: var(--amarillo);
}

/* ==========================================================================
   Páginas internas
   ========================================================================== */

/* Cabecera de páginas internas */
.cabecera-pagina {
  background: radial-gradient(70% 90% at 10% 0%, #fff8e0 0%, rgba(255, 255, 255, 0) 65%), var(--gris-claro);
}

.migas a:hover,
.legal__volver:hover,
.legal__cuerpo a {
  color: var(--negro);
  text-decoration: underline;
  text-decoration-color: var(--amarillo);
  text-decoration-thickness: 2px;
}

/* Servicios: tarjeta destacada clara */
.tarjeta-servicio--destacada {
  border-color: var(--linea);
  background: radial-gradient(120% 150% at 100% 0%, rgba(255, 194, 14, 0.16), transparent 55%), var(--gris-claro);
  color: var(--texto);
}

.tarjeta-servicio--destacada::after {
  background: radial-gradient(circle, rgba(255, 194, 14, 0.25), transparent 70%);
}

.tarjeta-servicio--destacada .tarjeta-servicio__icono {
  border-color: transparent;
  background: var(--negro);
  color: var(--amarillo);
}

.tarjeta-servicio--destacada .tarjeta-servicio__titulo {
  color: var(--negro);
}

.tarjeta-servicio--destacada .tarjeta-servicio__texto,
.tarjeta-servicio--destacada .lista-chequeo {
  color: var(--texto-suave);
}

.tarjeta-servicio--destacada .enlace-servicio {
  color: var(--negro);
}

/* Tecnología: panel claro, la terminal se queda negra como acento */
.panel-infra {
  border-color: var(--linea);
  background: var(--gris-claro);
  color: var(--texto);
}

.panel-infra::before {
  background-image: radial-gradient(circle at 8% 0%, rgba(255, 194, 14, 0.22), transparent 45%),
    linear-gradient(to right, rgba(17, 17, 17, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 17, 0.045) 1px, transparent 1px);
}

.panel-infra .etiqueta {
  color: var(--negro) !important;
}

.panel-infra__titulo {
  color: var(--negro);
}

.panel-infra__texto {
  color: var(--texto-suave);
}

.lista-infra {
  color: var(--texto);
}

.lista-infra .icono {
  color: var(--amarillo-prof);
}

.panel-infra .boton--marca,
.contacto__panel .boton--marca {
  background: var(--amarillo);
  color: var(--negro);
  box-shadow: 0 14px 30px -18px rgba(230, 168, 0, 0.8);
}

.panel-infra .boton--marca:hover,
.contacto__panel .boton--marca:hover {
  background: var(--amarillo-hover);
  color: var(--negro);
}

.terminal {
  border-color: #222;
  background: var(--negro);
  box-shadow: 0 35px 70px -35px rgba(17, 17, 17, 0.55);
}

.terminal__punto:first-child {
  background: rgba(255, 255, 255, 0.35);
}

.terminal__punto:nth-child(2) {
  background: var(--amarillo);
}

.terminal__punto:nth-child(3) {
  background: rgba(255, 255, 255, 0.18);
}

.terminal__linea--comando {
  color: var(--amarillo);
}

.terminal__marca,
.terminal__marca--flecha {
  color: var(--amarillo);
}

.terminal__cursor {
  background: var(--amarillo);
}

/* Herramientas */
.herramienta:hover {
  border-color: var(--negro);
}

.herramienta__logo {
  background: var(--gris-claro);
}

.herramienta__logo--icono {
  background: var(--negro);
  color: var(--amarillo);
}

/* Proceso */
.paso {
  background: var(--gris-claro);
}

.paso__icono {
  color: var(--negro);
}

/* Contacto: panel claro con formulario blanco */
.contacto {
  background: var(--blanco);
}

.contacto__panel {
  border: 1px solid var(--linea);
  background: var(--gris-claro);
  color: var(--texto);
}

.contacto__panel::before {
  background: radial-gradient(circle, rgba(255, 194, 14, 0.28), transparent 68%);
}

.contacto__panel::after {
  background: radial-gradient(circle, rgba(17, 17, 17, 0.06), transparent 70%);
}

.contacto__panel .etiqueta {
  color: var(--negro) !important;
}

.contacto__titulo {
  color: var(--negro);
}

.contacto__texto {
  color: var(--texto-suave);
}

.canal {
  border-color: var(--linea);
  background: var(--blanco);
}

.canal:hover {
  border-color: var(--negro);
  background: var(--blanco);
}

.canal__icono {
  background: var(--negro);
  color: var(--amarillo);
}

.canal small {
  color: #8d8b86;
}

.canal strong {
  color: var(--negro);
}

.contacto__respuesta {
  color: var(--texto-suave);
}

.contacto__respuesta .icono {
  color: var(--amarillo-prof);
}

.formulario {
  border-color: var(--linea);
  background: var(--blanco);
  box-shadow: var(--sombra-suave);
}

.formulario__titulo {
  color: var(--negro);
}

.formulario__titulo .icono {
  color: var(--amarillo-prof);
}

.formulario .form-label {
  color: var(--negro);
}

.formulario .form-control,
.formulario .form-select {
  border-color: #dcdcd8;
  background-color: var(--blanco);
  color: var(--negro);
}

.formulario .form-control::placeholder {
  color: #9a9893;
}

.formulario .form-control:focus,
.formulario .form-select:focus {
  border-color: var(--negro);
  background-color: var(--blanco);
  box-shadow: 0 0 0 4px rgba(255, 194, 14, 0.35);
  color: var(--negro);
}

.formulario .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

.formulario .form-control.is-invalid,
.formulario .form-select.is-invalid {
  border-color: #d14343;
}

.formulario .invalid-feedback {
  color: #b42318;
}

.formulario .form-check-input {
  border-color: #b5b3ae;
  background-color: var(--blanco);
}

.formulario .form-check-input:checked {
  border-color: var(--negro);
  background-color: var(--negro);
}

.formulario .form-check-input:focus {
  border-color: var(--negro);
  box-shadow: 0 0 0 4px rgba(255, 194, 14, 0.35);
}

.formulario .form-check-label {
  color: var(--texto-suave);
}

.formulario .form-check-label a {
  color: var(--negro);
  text-decoration-color: var(--amarillo);
}

.formulario__nota {
  color: #8d8b86;
}

.estado-formulario--ok {
  border-color: rgba(230, 168, 0, 0.45);
  background: var(--amarillo-suave);
  color: var(--negro);
}

.estado-formulario--error {
  border-color: rgba(209, 67, 67, 0.3);
  background: #fdecec;
  color: #8a1c1c;
}

/* Preguntas (acordeón) */
.acordeon .accordion-button:not(.collapsed) {
  color: var(--negro);
  background: var(--amarillo-suave);
  box-shadow: none;
}

.acordeon .accordion-button:focus {
  box-shadow: 0 0 0 4px rgba(255, 194, 14, 0.35);
}

.acordeon .accordion-body {
  background: var(--amarillo-suave);
}