/* app.css — compat → main → custom */
/* ============================================================================
   compat.css — subconjunto de Bootstrap 3 que el rediseño (custom.css) TODAVÍA usa.
   mx-curp nunca estuvo 100% desacoplado de Bootstrap: custom.css le pisó el look
   pero sigue dependiendo de su grilla (form), utilidades y componentes base.
   Va ANTES de main.css y custom.css (mismo orden de cascada que tenía el sitio,
   donde bootstrap.min.css cargaba primero). custom.css pisa donde tiene opinión.

   ⚠ DEUDA: esto es "residuo de Bootstrap". El objetivo es eliminarlo reescribiendo
   el markup del form a flexbox propio. Pruning = follow-up con verificación visual.
   Valores tomados de Bootstrap 3.3 para garantizar paridad.
   ============================================================================ */

/* Imágenes responsive */
.img-responsive { display: block; max-width: 100%; height: auto; }

/* Clearfix (form-group / row con hijos float) */
.form-group::before, .form-group::after,
.row::before, .row::after { content: " "; display: table; }
.form-group::after, .row::after { clear: both; }

/* Grilla — cols usadas por el form real. float + ancho %. Dentro de .row (flex, en
   custom.css) el float se ignora y manda el sizing flex; en .form-group (bloque) el
   float las pone lado a lado, como hacía Bootstrap. */
.col-xs-4, .col-xs-8, .col-xs-10, .col-xs-12,
.col-sm-3, .col-sm-5, .col-sm-12 {
    position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px;
}
.col-xs-12 { width: 100%; float: left; }
.col-xs-10 { width: 83.33333%; float: left; }
.col-xs-8  { width: 66.66667%; float: left; }
.col-xs-4  { width: 33.33333%; float: left; }
@media (min-width: 768px) {
    .col-sm-12 { width: 100%; float: left; }
    .col-sm-5  { width: 41.66667%; float: left; }
    .col-sm-3  { width: 25%; float: left; }
    .col-sm-offset-3 { margin-left: 25%; }
    .col-sm-offset-2 { margin-left: 16.66667%; }
}

/* Formularios */
/* Normalize: los controles heredan la tipografía del sitio. Bootstrap lo hacía vía
   normalize; sin esto inputs/selects usan la fuente default del navegador y el
   watermark (placeholder) se ve con otra tipografía. */
button, input, optgroup, select, textarea { font-family: inherit; }
.form-control {
    display: block; width: 100%; height: 38px; padding: 6px 12px;
    font-size: 14px; line-height: 1.42857143; color: #555;
    background-color: #fff; border: 1px solid #ccc; border-radius: 4px;
}
.form-control:focus { border-color: #66afe9; outline: 0; box-shadow: 0 0 6px rgba(102,175,233,.4); }
.control-label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; }
.form-group { margin-bottom: 15px; }   /* Bootstrap lo tenía; sin esto los inputs quedan pegados */
.form-horizontal .form-group { margin-left: -15px; margin-right: -15px; }
@media (min-width: 768px) {
    .form-horizontal .control-label { text-align: right; padding-top: 7px; margin-bottom: 0; }
}
.has-error .form-control { border-color: #a94442; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }
.has-error .control-label { color: #a94442; }

/* Utilidades */
.text-center { text-align: center; }
.text-danger { color: #a94442; }
.text-muted  { color: #777; }
@media (max-width: 767px) { .hidden-xs { display: none !important; } }

/* Alerts */
.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-info    { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.alert-danger  { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

/* Tablas */
.table { width: 100%; max-width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.table > tbody > tr > td, .table > tbody > tr > th { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th { border: 1px solid #ddd; }

/* Panel (poco uso) */
.panel { margin-bottom: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.panel-body { padding: 15px; }

/* .btn — solo en páginas legacy del flujo viejo; base mínima */
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; border-radius: 4px; cursor: pointer; }

body {
	margin: 0px;
	font-family: sans-serif, Arial, Helvetica;
	background-repeat: repeat;
}

img {
	border: 0;
}

p {
	margin: 5px 0px 5px 0px;
}

/* --------------- HEADER --------------- */

#header {
	width: 100%;
	box-shadow: 4px 5px 15px #888888;
	float: left;
}

#header #headerContent {
	margin: 0 auto;
	position: relative;
}

@media only screen and (min-width : 320px) {
	#header #headerContent #logo {
		width: 13%;
	}
	
	#header #headerContent #title {
		width: 83%;
	}
}

@media only screen and (min-width : 480px) {
	#header #headerContent #logo {
		width: 11%;
	}
	
	#header #headerContent #title {
		width: 86%;
	}
}

@media only screen and (min-width : 1200px) {
	#header #headerContent #logo {
		width: 9%;
	}
	
	#header #headerContent #title {
		width: 88%;
	}
}

#header #headerContent #logo {
	height: auto;
	float: left;
	margin-left: 1%;
}

#header #headerContent #title {
	height: auto;
	float: right;
	margin: 0% 1% 1% 1%;
}

#header #headerContent #title .heading {
	font-size: 3em;
	text-transform: uppercase;
	text-shadow: 2px 2px 2px gray;
	font-weight: bold;
}

#header #headerContent #title .heading a {
	text-decoration: none;
}

#header #headerContent #subtitle {
	font-size: 1.6em;
}

@media screen and (max-width: 450px) {
	#header #headerContent #subtitle {
		font-size: 0.8em;
	}
	#header #headerContent #title .heading {
		font-size: 1.3em;
	}
}

@media screen and (min-width: 451px) {
	#header #headerContent #subtitle {
		font-size: 1em;
	}
	#header #headerContent #title .heading {
		font-size: 1.7em;
	}
}

@media screen and (min-width: 580px) {
	#header #headerContent #subtitle {
		font-size: 1.2em;
	}
	#header #headerContent #title .heading{
		font-size: 1.9em;
	}
}

@media screen and (min-width: 700px) {
	#header #headerContent #subtitle {
		font-size: 1.4em;
	}
	#header #headerContent #title .heading {
		font-size: 2.2em;
	}
}

@media screen and (min-width: 1000px) {
	#header #headerContent #subtitle {
		font-size: 1.6em;
	}
	#header #headerContent #title .heading {
		font-size: 3em;
	}
}

@media screen and (max-width: 375px) {
	#header #headerContent #socialLinks {
		top: 0px;
	    left: 0px;
	    right: initial;
		width: 78px;
	}
	#header #headerContent #socialLinks .socialLink {
		width: 20px;
		height: 20px;
	}
}

#headerContent #facebookLikeURL {
	position: absolute;
	top: 3px;
	right: 1.5%;
}

#headerContent #socialLinks {
	position: absolute;
	top: 3px;
	right: 4px;
	left: initial;
	width: 76px;
}

#headerContent #socialLinks .socialLink {
	margin: 3px;
	float: left;
}

#headerAd {
	text-align: center;
	margin: 18px auto 10px auto;
	height: 90px;
}


/* --------------- FOOTER --------------- */

#footer {
	width: 100%;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

#footer #footerContent {
	margin: 0px auto;
	text-align: center;
	padding: 15px 0px 0px;
}

#footer #footerContent .text {
	padding: 12px 0px 10px 0px;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	text-shadow: 2px 2px 2px gray;
}

#footer #footerContent .disclaimer {
	font-size: 10px;
	width: 70%;
	margin: auto;
	padding-bottom: 7px;
}

#footer #footerContent .disclaimer ul {
    list-style-type: none;
}

#footer #footerContent .contact {
	font-size: 10px;
	width: 70%;
	margin: auto;
	padding-bottom: 7px;
}

#footer #footerContent .policies {
	font-size: 13px;
	padding-bottom: 10px;
}

/* --------------- CONTAINER --------------- */
.container {
	min-height: 800px;
}

/* --------------- BOX --------------- */
.container .box {
	margin-bottom: 20px;
	box-shadow: 2px 2px 14px #888888;
	line-height: 30px;
	width: 100%;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	text-align: center;
}

.container .row.box {
	margin: 0px 0px 20px 0px;
}

.container .box:hover {
	box-shadow: 4px 5px 15px #888888;
}

/* --------------- STACKED ROWS (flexbox row + wrap, equal heights) ---------------
   Reemplaza el viejo comportamiento Masonry/JS que dejaba huecos tipo "tetris".
   Las cajas caen en pares row-by-row, cada fila con altura igual a la caja más alta.
   Cero JS moviendo cosas (mejor CLS, mejor UX).
*/
.container .row.stacked {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.container .row.stacked > [class*="col-"] {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.container .row.stacked > [class*="col-"] > .box {
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}
.container .row.stacked > [class*="col-"] > .boxHeading {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
}
.container .row.stacked > [class*="col-"] > .boxHeading + .box {
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

/* --------------- BOXHEADING --------------- */
.container .boxHeading {
	text-align: center;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 8px 0px;
	width: 100%;
	margin-top: 20px;
}

.container .boxHeading h1 {
	font-size: 1.5em
}

.container .boxHeading h2 {
	font-size: 1.3em
}

.container .boxHeading h1,
.container .boxHeading h2 {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	margin: 1px;
	font-weight: bold;
}

.container .boxHeading .new {
	color: yellow;
}

/* --------------- TEXT --------------- */
.container .box .text {
	padding: 4px 8px;
	text-align: center;
	font-size: 16px;
}

.container .box .text ul, .container .box .text ol {
	margin: 16px 0px 5px;
	text-align: left;
}

.container .box .text ul li {
	line-height: 1.3em;
	margin-bottom: 10px;
}

.container .box .subHeading {
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	margin-top: 14px;
	padding: 3px;
	line-height: 19px;
}

.container .bolded {
	font-weight: bold;
}

/* --------------- SOCIAL --------------- */
.container .sharebox {
	display: inline-block;
}

.container .sharebox .whatsappShare {
	display: inline-block;
	vertical-align: bottom;
}

.container .sharebox .whatsappShare img {
	height: 23px;
	width: 23px;
	vertical-align: bottom;
}

.container .sharebox .twitterShare {
	display: inline-block;
	vertical-align: bottom;
	height: 20px;
}

.container .sharebox .facebookShare {
	display: inline-block;
	vertical-align: bottom;
}

/* --------------- CONTROLS --------------- */

.container .box .controls {
	text-align: center;
	padding: 12px 0px 16px 0px;
}

.container .box .controls .button {
	padding: 8px;
	font-size: 1em;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	font-weight: bold;
	white-space: nowrap;
}

.container .button:hover,  .container .link:hover {
	cursor: pointer;
}

.container .box .controls a.button {
	text-decoration:none;
}

.container .controls .button.disabledBtn {
	background: grey;
}

.container .controls .button.disabledBtn:hover {
	background: grey;
}

.container .controls.inline {
	display: inline;
}

/* --------------- ADS --------------- */

.container .box .ad {
	height: 280px;
}

@media (max-width: 768px) {
	.container .box .ad {
		height: inherit;
	}
}

.container .box .ad.links {
	display: block;
	height: 90px;
	margin-bottom: 20px;
	margin-top: 15px;
}

.container .box .ad.auto {
	height: inherit;
	margin: 0px auto 10px auto;
}

.container .box .ad.horizontal {
	height: 60px;
	margin: 0px 20px 10px 20px;
}

@media (max-width: 1199px) {
	.container .box .ad.horizontal {
		height: 250px;
	}
}

@media (max-width: 767px) {
	.container .box .ad.horizontal {
		height: inherit;
		margin: auto;
	}
}

.mock-link-ad {
	height:90px;
	background: black; 
	color: white	
}

@media(max-width:768px){
	.free-link-ad {
		margin-top: 10px;	
	}
	
	.free-link-ad.no-bottom-content {
		margin-bottom: 15px;
	}
}

@media(max-width:550px){
	.free-link-ad {
		margin-top: 0px;
		margin-bottom: 0px;
	}
	
	.free-link-ad.no-bottom-content {
		margin-bottom: 10px;
	}
}

@media(max-width:550px){
	.mock-link-ad {
		display:inline-block;
		width:200px;
		height:90px;
		background: black; 
		color: white	
	}
}

@media(min-width:550px){

	.container .box .ad.links {
		height:15px;
	}
	
	.mock-link-ad {
		display:inline-block;
		width:468px;
		height:15px;
		background: red; 
		color: white	
	}
}

@media(min-width:768px){
	
	.container .box .ad.links {
		height:90px;
	}
	
	.mock-link-ad {
		display:inline-block;
		width:200px;
		height:90px;
		background: black; 
		color: white	
	}
}

@media(min-width:992px){
	.mock-link-ad {
		display:inline-block;
		width:200px;
		height:90px;
		background: black; 
		color: white	
	}
}
@media(min-width:1200px){
	.mock-link-ad {
		display:inline-block;
		width:200px;
		height:90px;
		background: black; 
		color: white	
	}
}

.mock-responsive-ad {
	display: inline-block;
	width: 100%;
	height: 100%;
	background: black;
	color: white;
}

.mock-non-responsive-ad {
	display: inline-block;
	background: black;
	color: white
}

#footer #footerContent .ad {
	padding: 0px 10px;
}

@media (min-width: 600px) {
	#footer #footerContent .ad {
		height: 20px;
		padding: 0px 20px;
	}
}

/* --------------- MESSAGE --------------- */
.container .message {
	padding: 8px;
	text-align: center;
	margin: 10px 0px;
	clear: both;
	font-size: 0.95em;
}

.container .message.important {
	background: white;
	color: #474747;
}

.container .message.moderate {
	background: #E6C947;
	color: #474747;
}

.container .message.normal {
	background: #F7F7F7;
	color: #474747;
}

.container .message .controls {
	display: inline;
}

.container .message .controls .button {
	color: white;
	padding: 4px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-weight: bold;
}

.container .message  a.button {
	text-decoration:none;
	background: #0192D0;
}

.container .message a.button:hover {
	background: #2F43CA;
}

.container .message .highlighted {
	font-weight: bold;
	font-size: 1em;
}

/* --------------- SPECIFIC PAGES --------------- */

.container .privacyPolicy p {
	margin: 13px;
	
}

/* --------------- UTILS --------------- */

.container .img-rounded {
	margin: 0 auto;
	border: 1px solid #aaa;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    margin: 0 auto;
}

.notfound {
	text-align: center;
	margin: 150px 10px;
	font-size: 1.5em;
}

.sendContactForm .captcha {
    width: 304px;
    height: 78px;
    margin: 0 auto;
}

.sendContactForm {
    margin: 0px 30px;
}


@media only screen and (max-width : 768px) {
	.stacked > .col-sm-6 .box{
		width: 100%;
	}
}

.lowercase {
	text-transform: lowercase;
}

.uppercase {
	text-transform: uppercase;
}

.toLeft {
	text-align: left;
}

::-webkit-input-placeholder {
   text-transform: initial;
}

:-moz-placeholder { 
   text-transform: initial;
}

::-moz-placeholder {  
   text-transform: initial;
}

.button-spinner  {
	padding-left:16px;
	background:url('/images/button-spinner.gif') no-repeat top left;
}

/* --------------- MOBILE TWEAKS --------------- */
@media only screen and (max-width : 680px) {
	.container .boxHeading h1, .container .boxHeading h2 {
	    font-size: 1.2em;
	}
	
	.container .box {
		margin-bottom: 0px;
	}
	
	.container .box .text {
		line-height: 27px;
	}

	.mobile-hidden {
		display: none !important;
	}
}

/* Removing padding for mobile */
@media only screen and (max-width : 480px) {

	.container .box .text {
		padding: 10px;
	}
	
	table {
		font-size: 12px;
	}
	
	table td{
		font-size: 13px;
	}
	
	.col-xs-1, .col-sm-1, .col-ms-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-ms-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-ms-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-ms-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-ms-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-ms-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-ms-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-ms-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-ms-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-ms-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-ms-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-ms-12, .col-md-12, .col-lg-12 {
		padding: 0px;
	}
	
	.row {
		margin: 0px;
	}
	
	.container {
		padding: 0px;
	}
	
	.column {
		padding: 0px;
	}
	
	.container .box {
		-webkit-border-bottom-right-radius: 0px;
		-webkit-border-bottom-left-radius: 0px;
		-moz-border-radius-bottomright: 0px;
		-moz-border-radius-bottomleft: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
		margin-bottom: 20px;
	}
	
	.container .boxHeading {
		-webkit-border-bottom-right-radius: 0px;
		-webkit-border-bottom-left-radius: 0px;
		-moz-border-radius-bottomright: 0px;
		-moz-border-radius-bottomleft: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
		border-top-left-radius: 0px;
	    border-top-right-radius: 0px;
	}

	.container .form-horizontal .form-group {
		margin-left: auto;
		margin-right: auto;
	}
}

/* --------------- SEARCH TABLE --------------- */
.searchInput::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #aaa;
}
.searchInput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #aaa;
   opacity:  1;
}
.searchInput::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #aaa;
   opacity:  1;
}
.searchInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #aaa;
}
.searchInput::-ms-input-placeholder { /* Microsoft Edge */
   color:    #aaa;
}

.searchInputHolder {
	margin: 10px 10px 10px 30px;
	position: relative;
}

.searchInputHolder .searchIcon {
	position: absolute;
	left: -20px;
	top: 10px;
}

.searchInputHolder .searchClear {
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
}

.foundElement { 
	background-color: yellow; 
}

.loadInputSpinner {
    background: white url('/images/spin-loader.gif') no-repeat center right 6px;
}

/* --------------- BOOTSTRAP TOOLTIPS --------------- */

[data-toggle="tooltip"] {
	cursor: help;
}

.tooltip-inner ul {
	padding: 12px;
	margin: 0px;
	text-align: left;
}

/* ------------------------------------------ */

.stepper .explain-box {
	margin: 5px 0px;
}

ul.stepper {
   counter-reset: section;
   overflow-y: auto;
   overflow-x: hidden;
}

@media (max-width: 768px) {
	ul.stepper {
		padding-left: 0px;		
	}
}

.stepper h2 {
	font-size: 16px;
	margin-top: 17px;
} 

ul.stepper .step {
   position: relative;
   list-style-type: none;
   text-align: left;
}

@media only screen and (min-width: 993px){
   ul.stepper.horizontal .step {
      position: static;
      margin: 0;
      width: 100%;
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
      height: 84px !important;
   }

   ul.stepper.horizontal>.step:last-of-type, ul.stepper.horizontal>.step[data-last="true"] {
      width: auto !important;
   }

   ul.stepper.horizontal .step:not(:last-of-type):after, ul.stepper.horizontal>.step.active:not(:last-of-type):after{
      content: '';
      position: static;
      display: inline-block;
      width: 100%;
      height: 1px;
   }
}

ul.stepper>li:not(:last-of-type) {
   margin-bottom: 10px;
   -webkit-transition: margin-bottom 0.4s;
   transition: margin-bottom 0.4s;
   text-align: left;
}

ul.stepper .step:before {
   position: absolute;
   top: 12px;
   counter-increment: section;
   content: counter(section);
   height: 28px;
   width: 28px;
   color: white;
   background-color: rgba(0,0,0,0.3);
   border-radius: 50%;
   text-align: center;
   line-height: 28px;
   font-weight: 400;
}

ul.stepper .step:not(:last-of-type).active {
   margin-bottom: 0px;
   text-align: left;
}


ul.stepper .step.active:before, ul.stepper .step.done:before {
   background-color: #2196f3;
}

ul.stepper .step.done:before {
   content: '\e5ca';
   font-size: 16px;
   font-family: 'Material Icons';
}

ul.stepper .step-title {
   margin: 0 -24px;
   padding: 0.1px 44px 1px 64px;
   display: block;
}

ul.stepper .step.wrong:before {
   content: '\e001';
   font-size: 24px;
   font-family: 'Material Icons';
   background-color: red !important;
}

@media only screen and (min-width: 993px){
   ul.stepper.horizontal .step-title:after {
      top:15px;
   }
}

ul.stepper .step-title:after {
   content: attr(data-step-label);
   display: block;
   position: absolute;
   font-size: 12.8px;
   font-size: 0.8rem;
   color: #424242;
   font-weight: 400;
}

ul.stepper>.step:not(:last-of-type):after {
   content: '';
   position: absolute;
   top: 50px;
   left: 13.5px;
   width: 1px;
   height: 40%;
   height: calc(100% - 38px);
   background-color: rgba(0,0,0,0.1);
   -webkit-transition: all 0.4s;
   transition: all 0.4s;
}

ul.stepper .step.active .step-title {
   font-weight: 500;
}

ul.stepper .step-content {
   position: relative;
   height: calc(100% - 132px);
   width: inherit;
   overflow: visible;
   margin-left: 41px;
   margin-right: 24px;
}

.refreshCaptcha {
	position: absolute;
	right: -22px;
    top: 17px;
    line-height: 17px;
    cursor: pointer;
}

ul.positive, ul.negative {
	list-style:none;
}

.container .box .text ul.positive li, .container .box .text ul.negative li, .container .box .text ul.neutral li {
	line-height: 20px;
	list-style:none;
}

ul.positive li, ul li.positive {
	background:url('/images/positive-bullet.png') no-repeat 0 0px;
	padding: 0em 0em 0em 2em;
}

ul.negative li, ul li.negative {
	background:url('/images/negative-bullet.png') no-repeat 0 0px;
	padding: 0em 0em 0em 2em;
}

ul.neutral li, ul li.neutral {
	background:url('/images/neutral-bullet.png') no-repeat 0 0px;
	padding: 0em 0em 0em 2em;
}

.mm {
	margin: auto;
	text-align: center;
}

.mm.top {
	margin-top: 10px; 
}

.mm.bottom {
	margin-bottom: 10px; 
}

.sponsored-legend {
    color: #7f7f7f;
    font-size: 11px;
    font-family: times;
    display: none;
}
/* =========================================================================
   curp-gratis.com.mx — Hoja de estilos
   Mobile-first · variables de color · Bootstrap-like friendly
   Todo el color vive en variables (:root) para tunear fácil.
   ========================================================================= */

/* ---- Reset suave ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
  /* Paleta — Verde institucional (base). Las alternativas se inyectan por JS. */
  --color-primary:        #16774A;   /* verde oscuro — CTAs, marca */
  --color-primary-strong: #0F5C3B;   /* hover / titulares / footer */
  --color-accent:         #23A45C;   /* verde vivo — detalles */
  --color-bg:             #EAF7F0;   /* fondo de página (tinte verde) */
  --color-surface:        #FFFFFF;   /* tarjetas */
  --color-soft:           #E4F3EB;   /* chips, callouts, hovers */
  --color-ink:            #15241C;   /* titulares */
  --color-text:           #3E4F46;   /* cuerpo */
  --color-muted:          #6E7F75;   /* secundario */
  --color-border:         #D3E6DB;   /* bordes */
  --color-border-strong:  #BBD9C8;

  /* Estados */
  --color-danger:         #B5402F;
  --color-danger-soft:    #FBEAE6;
  --color-success:        #14784A;
  --color-success-soft:   #E1F3E8;

  /* Tipografía — del sistema (cero descarga, CWV) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Radios */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Sombras (tinte verde, muy suaves) */
  --sh-sm: 0 1px 2px rgba(21,36,28,.05), 0 1px 3px rgba(21,36,28,.04);
  --sh:    0 2px 4px rgba(21,36,28,.05), 0 8px 24px -12px rgba(15,92,59,.18);
  --sh-lg: 0 4px 8px rgba(21,36,28,.06), 0 24px 48px -20px rgba(15,92,59,.28);

  /* Layout */
  --content: 880px;
  --gutter: clamp(16px, 5vw, 28px);

  /* Focus */
  --ring: 0 0 0 3px rgba(35,164,92,.35);
}

/* =========================================================================
   2. BASE
   ========================================================================= */
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 480px) { body { font-size: 16px; } }

p { text-wrap: pretty; }
strong { color: var(--color-ink); font-weight: 650; }

h1, h2, h3 {
  color: var(--color-ink);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.85rem, 6vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 4.4vw, 1.85rem); }
h3 { font-size: clamp(1.12rem, 3vw, 1.28rem); }

a.link, .content a:not(.button) {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 2px;
  font-weight: 550;
}
.content a:not(.button):hover { text-decoration-color: var(--color-primary); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* Container / grilla (compatible con .row / .col-sm-*) */
.container {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.content { padding-block: clamp(20px, 5vw, 40px); }

/* La grilla Bootstrap-like se conserva pero el contenido va a 1 columna en la
   mayoría de páginas; aquí solo aseguramos que no se rompa nada. */
.row { display: flex; flex-wrap: wrap; margin-inline: -10px; }
.row > [class^="col-"], .row > [class*=" col-"] { padding-inline: 10px; }
[class^="col-"], [class*=" col-"] { flex: 1 1 100%; min-width: 0; }
@media (min-width: 768px) {
  .col-sm-6 { flex-basis: 50%; max-width: 50%; }
  .col-sm-4 { flex-basis: 33.333%; max-width: 33.333%; }
  .col-sm-8 { flex-basis: 66.667%; max-width: 66.667%; }
  .col-sm-3 { flex-basis: 25%; max-width: 25%; }
}

/* =========================================================================
   3. HEADER + NAV
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
  font-weight: 800;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.brand__mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--color-primary);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), var(--sh-sm);
}
.brand__mark svg { width: 19px; height: 19px; }
.brand__name { font-size: 1.18rem; }
.brand__name span { color: var(--color-accent); font-weight: 700; }

/* Nav desktop */
.nav { display: none; align-items: center; gap: 4px; }
.nav a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 550;
  font-size: .96rem;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--color-soft); color: var(--color-primary-strong); }
.nav a[aria-current="page"] { color: var(--color-primary-strong); background: var(--color-soft); }
.nav a.nav-cta {
  background: var(--color-primary);
  color: #fff;
  margin-left: 6px;
  box-shadow: var(--sh-sm);
}
.nav a.nav-cta:hover { background: var(--color-primary-strong); color: #fff; }

/* Hamburguesa */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  background: var(--color-surface);
}
.nav-toggle span {
  display: block; height: 2px; width: 20px; margin-inline: auto;
  background: var(--color-ink); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer mobile */
.nav-drawer {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
body.nav-open .nav-drawer { display: block; }
.nav-drawer .container { padding-block: 10px; }
.nav-drawer a {
  display: flex; align-items: center; justify-content: space-between;
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 600;
  padding: 14px 6px;
  border-bottom: 1px solid var(--color-border);
}
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer a.nav-cta {
  margin: 12px 0 6px;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--r-sm);
  border: none;
  padding: 14px;
}

@media (min-width: 920px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .nav-drawer { display: none !important; }
}

/* =========================================================================
   4. BREADCRUMBS
   ========================================================================= */
.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: .9rem;
  color: var(--color-muted);
  padding-top: clamp(16px, 4vw, 28px);
}
.breadcrumbs a { color: var(--color-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumbs li { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs ol { display: contents; margin: 0; padding: 0; }
.breadcrumbs .sep { color: var(--color-border-strong); }
.breadcrumbs [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

/* =========================================================================
   5. HERO (home)
   ========================================================================= */
.hero { padding-block: clamp(28px, 6vw, 56px) clamp(12px, 3vw, 24px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 650; letter-spacing: .02em;
  color: var(--color-primary-strong);
  background: var(--color-soft);
  border: 1px solid var(--color-border);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  max-width: 100%;
}
.eyebrow svg { width: 15px; height: 15px; flex: none; }
.hero h1 { margin-top: 18px; }
.hero__lead {
  margin-top: 14px;
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  color: var(--color-text);
  max-width: 60ch;
}

/* Variantes de hero — se muestran según body[data-hero] */
.hero-variant { display: none; }
body[data-hero="centrado"] .hero-variant--centrado,
body[data-hero="buscador"] .hero-variant--buscador,
body[data-hero="split"]    .hero-variant--split { display: block; }

.hero-variant--centrado { text-align: center; }
.hero-variant--centrado .eyebrow { margin-inline: auto; }
.hero-variant--centrado .hero__lead { margin-inline: auto; }

/* Hero buscador — mini consulta inline */
.hero-search {
  margin-top: 26px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: clamp(16px, 4vw, 22px);
  text-align: left;
}
.hero-search__label { font-weight: 650; color: var(--color-ink); margin-bottom: 10px; }
.hero-search__row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 620px) { .hero-search__row { flex-direction: row; } }
.hero-search input { flex: 1; }
.hero-search .button { white-space: nowrap; }
.hero-search__hint { margin-top: 10px; font-size: .85rem; color: var(--color-muted); }

/* Hero split */
.hero-variant--split .hero-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) {
  .hero-variant--split .hero-grid { grid-template-columns: 1.1fr .9fr; }
}
.hero-figure {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: 18px;
}

/* =========================================================================
   6. HOME SPOKES — accesos rápidos (filas full-width, opción 3)
   ========================================================================= */
.home-spokes {
  list-style: none; margin: clamp(24px, 5vw, 38px) 0 0; padding: 0;
  display: grid; gap: 12px;
}
.home-spokes a {
  display: flex; align-items: center; gap: 16px;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--sh-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s;
}
.home-spokes a:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh);
  border-color: var(--color-border-strong);
}
.spoke__num {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--color-soft);
  color: var(--color-primary-strong);
  font-weight: 800; font-size: 1rem;
}
.spoke__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spoke__title { display: block; font-weight: 700; color: var(--color-ink); font-size: 1.6rem; line-height: 1.25; }
.spoke__desc { display: block; font-size: 1rem; color: var(--color-muted); margin-top: 2px; line-height: 1.35; }
.spoke__chev { flex: none; color: var(--color-border-strong); font-size: 1.5rem; line-height: 1; transition: transform .14s, color .14s; }
.home-spokes a:hover .spoke__chev { transform: translateX(3px); color: var(--color-primary); }

/* Spoke destacado (Consultar) */
.home-spokes a.spoke--feature {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.home-spokes a.spoke--feature:hover { background: var(--color-primary-strong); }
.spoke--feature .spoke__num { background: rgba(255,255,255,.16); color: #fff; }
.spoke--feature .spoke__title { color: #fff; }
.spoke--feature .spoke__desc { color: rgba(255,255,255,.82); }
.spoke--feature .spoke__chev { color: rgba(255,255,255,.7); }
.spoke--feature:hover .spoke__chev { color: #fff; }

/* =========================================================================
   7. BOX / BOXHEADING — secciones de contenido
   ========================================================================= */
.boxHeading {
  display: flex; align-items: center; gap: 12px;
  margin-top: clamp(34px, 6vw, 52px);
  margin-bottom: 14px;
}
.boxHeading::before {
  content: ""; flex: none;
  width: 5px; height: 1.4em;
  background: var(--color-accent);
  border-radius: var(--r-pill);
}
.boxHeading h2, .boxHeading h1 { margin: 0; }

.box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: clamp(20px, 4.5vw, 32px);
}
.box > * + * { margin-top: 1em; }
.box > h3 { margin-top: 1.4em; }

/* Listas con viñetas verdes */
.custom-bullet { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.custom-bullet li {
  position: relative; padding-left: 30px;
}
.custom-bullet li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 9px; height: 9px; border-radius: 3px;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-soft);
}

/* =========================================================================
   8. STEPPER — pasos numerados
   ========================================================================= */
.stepper { display: grid; gap: 0; margin: 6px 0; }
.step {
  position: relative;
  padding: 0 0 26px 56px;
}
.step:last-child { padding-bottom: 0; }
.step::before { /* número */
  content: counter(step);
  counter-increment: step;
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff; font-weight: 800; font-size: 1rem;
  box-shadow: var(--sh-sm);
}
.step::after { /* línea conectora */
  content: ""; position: absolute; left: 18px; top: 42px; bottom: 6px;
  width: 2px; background: var(--color-border);
}
.step:last-child::after { display: none; }
.stepper { counter-reset: step; }
.step-title { font-weight: 700; color: var(--color-ink); font-size: 1.08rem; padding-top: 6px; }
.step-content { margin-top: 4px; color: var(--color-text); }

.explain-box {
  margin-top: 12px;
  background: var(--color-soft);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-size: .95rem;
}
.explain-box strong { color: var(--color-primary-strong); }

/* =========================================================================
   9. TABLAS — comparación / errores
   ========================================================================= */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
.curp-explain-table, .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .95rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r);
  overflow: hidden;
}
.curp-explain-table th, .table th {
  text-align: left;
  background: var(--color-soft);
  color: var(--color-ink);
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
}
.curp-explain-table td, .table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.curp-explain-table tr:last-child td, .table tr:last-child td { border-bottom: none; }
.curp-explain-table .alert-danger, .table .alert-danger {
  background: var(--color-danger-soft); color: var(--color-danger); font-weight: 600;
}
.curp-explain-table .alert-success, .table .alert-success {
  background: var(--color-success-soft); color: var(--color-success); font-weight: 600;
}

/* Tabla de oficinas (páginas de estado) — scroll horizontal + 1ª col fija */
.office-table { min-width: 720px; }
.office-table th:first-child, .office-table td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--color-surface);
  box-shadow: 1px 0 0 var(--color-border);
}
.office-table th:first-child { background: var(--color-soft); }
.table-hint { font-size: .82rem; color: var(--color-muted); margin: 8px 2px 0; display: flex; align-items: center; gap: 6px; }
@media (min-width: 760px) { .table-hint { display: none; } }

/* =========================================================================
   10. CONTROLES — botones y links
   ========================================================================= */
.controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 650; font-size: 1rem;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--sh-sm);
  transition: background .15s, transform .12s, box-shadow .15s;
}
.button:hover { background: var(--color-primary-strong); transform: translateY(-1px); box-shadow: var(--sh); }
.button:active { transform: translateY(0); }
.button svg { width: 18px; height: 18px; }
.button.secondary {
  background: var(--color-surface);
  color: var(--color-primary-strong);
  border-color: var(--color-border-strong);
  box-shadow: none;
}
.button.secondary:hover { background: var(--color-soft); }
.button.block { width: 100%; }
.button.lg { padding: 16px 26px; font-size: 1.06rem; }

a.link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 650; text-decoration: none; color: var(--color-primary);
}
a.link::after { content: "→"; transition: transform .14s; }
a.link:hover::after { transform: translateX(3px); }

/* =========================================================================
   11. INFOGRAFÍAS
   ========================================================================= */
.infografia-wrap {
  margin: clamp(20px, 4vw, 32px) 0;
  text-align: center;
}
img.infografia, .infografia {
  width: 100%; height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  box-shadow: var(--sh-sm);
}
.infografia-cap { font-size: .85rem; color: var(--color-muted); margin-top: 10px; }

/* Placeholder rayado (solo prototipo; sustituir por SVG real) */
.ph {
  display: grid; place-items: center;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(35,164,92,.06) 11px 22px),
    var(--color-soft);
  color: var(--color-primary-strong);
  font-family: var(--font-mono);
  font-size: .8rem;
  text-align: center;
  padding: 24px;
  min-height: 200px;
}
.ph small { color: var(--color-muted); font-family: var(--font-sans); display:block; margin-top:6px; }

/* =========================================================================
   12. FORMULARIO DE CONSULTA — la estrella
   ========================================================================= */
.consulta {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.consulta__head {
  padding: clamp(18px, 4vw, 26px) clamp(18px, 4vw, 28px) 0;
}
.consulta__title { font-size: 1.6rem; }
.consulta__trust {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-size: .85rem; font-weight: 600; color: var(--color-primary-strong);
  background: var(--color-soft);
  border: 1px solid var(--color-border);
  padding: 6px 12px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.consulta__trust svg { width: 15px; height: 15px; flex: none; }

/* Pestañas / segmented */
.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin: 18px clamp(18px,4vw,28px) 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 4px;
}
.tabs button {
  border: none; background: transparent;
  padding: 11px 10px;
  border-radius: 8px;
  font-weight: 650; color: var(--color-muted);
  transition: background .15s, color .15s, box-shadow .15s;
}
.tabs button[aria-selected="true"] {
  background: var(--color-surface);
  color: var(--color-primary-strong);
  box-shadow: var(--sh-sm);
}

.consulta__body { padding: 20px clamp(18px,4vw,28px) clamp(20px,4vw,28px); }
.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Campos */
.field { margin-bottom: 16px; }
.field > label { display: block; font-weight: 600; color: var(--color-ink); font-size: .92rem; margin-bottom: 7px; }
.field .help { font-size: .82rem; color: var(--color-muted); margin-top: 6px; }
.input, input[type="text"].input, select.input {
  width: 100%;
  padding: 13px 14px;
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #9DB0A6; }
.input:focus { border-color: var(--color-accent); box-shadow: var(--ring); outline: none; }
.input.curp { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; font-size: 1.05rem; }

.field-row { display: grid; gap: 12px; }
@media (min-width: 560px) { .field-row.cols-2 { grid-template-columns: 1fr 1fr; } .field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

/* Segmented sexo */
.segmented { display: inline-flex; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--r-sm); padding: 3px; gap: 3px; }
.segmented label {
  padding: 9px 18px; border-radius: 8px; font-weight: 600; color: var(--color-muted); cursor: pointer; font-size: .95rem;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented input:checked + label { background: var(--color-surface); color: var(--color-primary-strong); box-shadow: var(--sh-sm); }

/* Variantes de formulario — body[data-form] */
body[data-form="elevado"] .consulta { box-shadow: var(--sh-lg); }
.consulta__badges { display: none; gap: 14px; flex-wrap: wrap; padding: 14px clamp(18px,4vw,28px) 0; }
body[data-form="elevado"] .consulta__badges { display: flex; }
.consulta__badge { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--color-text); }
.consulta__badge svg { width: 16px; height: 16px; color: var(--color-accent); }

/* Variante guiado: numera los campos */
body[data-form="guiado"] .tabpanel.is-active { counter-reset: f; }
body[data-form="guiado"] .field > label::before {
  counter-increment: f; content: counter(f);
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; margin-right: 8px;
  border-radius: 50%; background: var(--color-soft); color: var(--color-primary-strong);
  font-size: .72rem; font-weight: 800; vertical-align: middle;
}

/* Overlay de carga */
.consulta__overlay {
  position: absolute; inset: 0;
  display: none; place-items: center;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(2px);
  z-index: 5;
}
.consulta.is-loading .consulta__overlay { display: grid; }
.spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.consulta__overlay p { margin-top: 14px; font-weight: 600; color: var(--color-ink); }

/* =========================================================================
   13. FAQ — acordeón
   ========================================================================= */
.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r);
  overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  font-weight: 650; color: var(--color-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--color-accent); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 18px 18px; color: var(--color-text); }

/* =========================================================================
   14. FOOTER
   ========================================================================= */
.site-footer {
  margin-top: clamp(40px, 7vw, 72px);
  background: var(--color-primary-strong);
  color: #D9EBE1;
}
.site-footer a { color: #D9EBE1; text-decoration: none; }
.site-footer .container { padding-block: clamp(32px, 6vw, 52px); }
.footer-grid { display: grid; gap: 30px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr; } }

.footer-states h3 { color: #fff; font-size: 1.05rem; margin-bottom: 14px; }
.states-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px;
  font-size: .9rem;
}
@media (min-width: 480px) { .states-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .states-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .states-list { grid-template-columns: repeat(4, 1fr); } }
.states-list a { padding: 4px 0; opacity: .9; }
.states-list a:hover { color: #fff; opacity: 1; text-decoration: underline; }

.footer-meta h3 { color: #fff; font-size: 1.05rem; margin-bottom: 14px; }
.footer-meta ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; font-size: .92rem; }
.footer-meta a:hover { color: #fff; text-decoration: underline; }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 800; margin-bottom: 12px; }
.footer-brand .brand__mark { background: rgba(255,255,255,.14); }
.footer-legal {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .82rem; color: #A9C9BA;
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
}

/* =========================================================================
   15. UTILIDADES
   ========================================================================= */
.muted { color: var(--color-muted); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.section-intro { color: var(--color-text); max-width: 64ch; }
.divider { height: 1px; background: var(--color-border); border: none; margin: clamp(28px,5vw,44px) 0; }

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

/* ============================================================
   Reglas funcionales preservadas del custom.css anterior
   (necesarias para form-real.php y utilidades del sitio)
   ============================================================ */
.uppercase { text-transform: uppercase; }
.real-hp { position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px; height:1px; overflow:hidden; }
/* el form real usa la grilla Bootstrap (.form-group/.control-label/.form-control);
   Bootstrap sigue cargado antes de este archivo. */
.uppercase::-webkit-input-placeholder { text-transform: initial; }
.uppercase::placeholder { text-transform: initial; }

/* Links inline dentro del contenido. El core envuelve el contenido en <div class="container">
   (sin la clase .content del diseño), así que scopeamos el estilo de link de .content a
   .box (todo el contenido vive en boxes; header/footer/nav no son .box). */
.box a:not(.button):not(.link) {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-color: var(--color-border-strong);
	text-underline-offset: 2px;
}
.box a:not(.button):not(.link):hover { text-decoration-color: var(--color-primary); }

/* FIX integración: core/css/main.css define .container{min-height:800px} (pensado
   para el único .container que envolvía toda la página). El rediseño reusa .container
   para el ancho del header/footer/breadcrumb, que heredaban esos 800px y generaban un
   hueco vacío. Lo neutralizamos; el alto de página ya lo dan el contenido + el footer. */
.container { min-height: 0; }

/* Header y footer con esquinas rectas (sin redondeo). */

/* Header más grande (pedido): más alto + marca más grande. El header vive dentro
   del .container del core (cap 816px), así que el nav se comprime apenas para que
   entren los 6 ítems. */
.site-header__inner { min-height: 76px; gap: 16px; }
.brand__mark { width: 40px; height: 40px; border-radius: 11px; }
.brand__mark svg { width: 22px; height: 22px; }
.brand__name { font-size: 1.4rem; }
.nav { gap: 1px; }
.nav a { padding: 7px 8px; font-size: 0.86rem; }
.nav a.nav-cta { padding: 9px 13px; }

/* Botones: el texto va en <strong>, y la regla global strong{color:ink} lo oscurecía
   sobre el verde. Que herede el color del botón (blanco). Y centrar los grupos de
   botones dentro de las boxes (pedido). */
.button strong { color: inherit; font-weight: 700; }
.box .controls { justify-content: center; }

/* Consulta: badges centradas y más grandes (sin trust). Tabla de explicación más grande. */
.consulta__badges { justify-content: center; }
.consulta__badge { font-size: 1.12rem; }
.curp-explain-table { font-size: 1.15rem; }
/* La tabla de oficinas (directorio denso, 44+ filas) NO debe heredar el 1.15rem
   de .curp-explain-table; va más chica. Gana por venir después (misma especificidad). */
.office-table, .office-table th, .office-table td { font-size: 0.92rem; }

/* main.css centra todo el contenido de .box (text-align:center). El cuerpo (párrafos,
   listas, stepper, subheadings) va a la IZQUIERDA. Lo que debe seguir centrado lo está
   por su cuenta: imágenes y CTAs llevan style="text-align:center" inline (gana), y el
   form (.consulta__title h2, .tabs grid) no se toca acá. */
.container .box p,
.container .box ul,
.container .box ol,
.container .box .stepper,
.container .box .step-title,
.container .box .step-content,
.container .box .subHeading { text-align: left; }

/* Aire arriba y abajo de las enumeraciones dentro de las cajas (tienen margin:0). */
.container .box ul:not(.stepper),
.container .box ol { margin-block: 28px; }

/* Labels del form al lado del campo en UNA sola línea (desktop), para que queden
   alineadas verticalmente con el input (no bajar de renglón). En mobile siguen
   apiladas arriba del campo (col-xs-12). */
@media (min-width: 768px) {
  .consulta .control-label { white-space: nowrap; }
}

/* Breadcrumb un poco más grande (pedido) */
.breadcrumbs { font-size: 1.02rem; }

/* Aviso de sitio no oficial bajo el logo (E-E-A-T / evitar parecer gubernamental). */
.brand__text { display: inline-flex; flex-direction: column; line-height: 1.12; }
.brand__note { font-size: .7rem; font-weight: 500; color: var(--color-muted); letter-spacing: .01em; }

/* Texto de las cajitas (explain-box) apenas más chico que el de afuera (body 17px). */
.explain-box { font-size: 16px; }
/* Logo más grande. */
.brand__name { font-size: 1.32rem; }

/* Hover: Bootstrap pone a:hover{color azul} y pisaba el texto del botón. Forzar blanco. */
.button:hover, .button:focus { color: #fff; }
.button.secondary:hover, .button.secondary:focus { color: var(--color-primary-strong); }

/* Stepper: centrar verticalmente el título con el círculo numerado (estaban desalineados:
   el círculo quedaba más abajo que el "principio del texto"). */
.step-title { min-height: 38px; display: flex; align-items: center; padding-top: 0; }

/* Sin subrayado en el logo (hover) ni en los estados del footer. */
.brand, .brand:hover, .brand:focus { text-decoration: none; }
.states-list a, .states-list a:hover, .states-list a:focus { text-decoration: none; }

/* Título del paso más grande + alineado verticalmente con el círculo numerado. */
.step-title { font-size: 1.28rem; min-height: 38px; display: flex; align-items: center; padding-top: 0; }

/* El stepper viejo de main.css (ul.stepper .step...) pisaba el diseño. Override con
   misma especificidad: círculo arriba (alineado con el título) + título más grande. */
ul.stepper .step:before { top: 0; width: 38px; height: 38px; line-height: 38px; font-size: 1.2rem; }
ul.stepper .step-title { display: flex; align-items: center; min-height: 38px; padding-top: 0; padding-bottom: 0; }
ul.stepper .step-title h3 { font-size: 1.2rem; margin: 0; }

/* Lista de estados inline en la caja del home: sin subrayado. */
.states-inline a, .states-inline a:hover { text-decoration: none !important; }

/* main.css (.container .box, 0,2,0) sólo redondea abajo 10px y en mobile queda cuadrado.
   Forzamos las 4 esquinas con la misma especificidad. */
.container .box { border-radius: var(--r-lg); }

/* Drawer mobile: animado (slide con max-height) y SIN dejar espacio cerrado.
   overflow:hidden + max-height:0 (con box-sizing:border-box) colapsa también el
   padding y el borde del contenido, así cerrado mide 0. */
.nav-drawer {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  border-top: 1px solid transparent;
  transition: max-height .34s cubic-bezier(.4,0,.2,1), opacity .26s ease, border-color .2s;
}
body.nav-open .nav-drawer { max-height: 80vh; opacity: 1; border-top-color: var(--color-border); }
.nav-drawer > .container { min-height: 0; }
@media (min-width: 920px) { .nav-drawer { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .nav-drawer { transition: none; } }

/* Mobile: títulos de sección a la izquierda (main.css los centraba) + header más bajo. */
@media (max-width: 767px) {
  .container .boxHeading, .container .boxHeading h1, .container .boxHeading h2 { text-align: left; }
}
@media (max-width: 919px) {
  .site-header__inner { min-height: 48px; padding-block: 10px; }
  .brand__mark { width: 36px; height: 36px; border-radius: 9px; }
  .brand__mark svg { width: 20px; height: 20px; }
}

/* Mobile: badges del form más juntas verticalmente cuando wrapean. */
@media (max-width: 767px) { .consulta__badges { row-gap: 3px; } }

/* Mobile: el stepper con riel izquierdo (línea + círculo absoluto) no entra y corta las
   cajas. Sacamos el riel y la línea; el círculo azul va INLINE con el título (misma
   línea, a la izquierda) y las cajas ocupan el ancho completo. */
@media (max-width: 767px) {
  ul.stepper .step { padding-left: 0; padding-bottom: 22px; }
  ul.stepper .step:before { display: none; }                 /* círculo absoluto del riel */
  ul.stepper > .step:not(:last-of-type):after,
  .step::after { display: none; }                            /* línea conectora vertical */
  ul.stepper .step-content { margin-left: 0; }               /* caja a ancho completo */
  ul.stepper .step-title {
    display: flex; align-items: center; gap: 10px; text-align: left;
    counter-increment: section;                              /* el :before oculto ya no incrementa */
    min-height: 0;
  }
  ul.stepper .step-title::before {
    content: counter(section);
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: #2196f3; color: #fff; font-weight: 800; font-size: 1.2rem;
    display: grid; place-items: center; line-height: 1;
  }
}