:root {
--color-primary: #fffbfe;
--color-secondary: #7a7d7d;
--color-tertiary:#d0cfcf;
--color-quaternary: #565254;
--color-base: #ffffff;
--font-main: 'Archivo', sans-serif;
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md:1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
}

*  
  {
	    margin: 0;
    padding: 0;
   box-sizing: border-box;
	}

body {
  font-family: var(--font-main);
	line-height: 1.6;
  color: var(--color-quaternary);
  background-color: var(--color-primary);
}

.heavy-owner {
  background-color: var(--color-base);
    border-bottom    :1px solid #d4d0d2;
  position: sticky;
     top: 0;
    z-index     :        1000;
  padding: var(--spacing-sm) 0;
	
}

.eject-lemon     {
  max-width: 1200px;
  margin   :     0 auto;
  padding: 0 var(--spacing-md);
   display: flex;
	justify-content:space-between;
 align-items: center;
}

.paper-thumb {
    height: 45px;
   width: auto;
}

.giant-quota {
   display: none;
	background: none;
  border: none;
        cursor   :    pointer;
    padding: 0.5rem;
}

.giant-quota .material-symbols-outlined {
   font-size: 28px;
  color: var(--color-secondary);
}

.check-pound {
  display: flex;
  gap: var(--spacing-lg);
}  

.check-pound a  {
    text-decoration: none;
  color: var(--color-secondary);
    font-weight :  500;
  font-size: 0.95rem;
 transition: color 0.3s ease;
}

.check-pound a:hover {
  color: var(--color-quaternary);
}

.slime-them {
  padding: var(--spacing-xl) var(--spacing-md);
   min-height: 500px;
	display: flex;
			align-items: center;
  background-color: var(--color-primary);
}

.field-owner {
   max-width: 1200px;
   margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
}

.giant-lemon {
       font-size: 3rem;
    font-weight: 700;
   line-height: 1.2;
  margin-bottom: var(--spacing-md);
  color: var(--color-quaternary);
   max-width: 900px;
}

.heavy-thumb {
	font-size: 1.15rem;
   line-height   :      1.8;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-lg);
  max-width: 800px;
}

.eject-quota {
   display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);


}

.check-them, .paper-owner {
			padding: 0.875rem 1.75rem;
  text-decoration: none;
   font-weight: 600;
   font-size: 0.95rem;
   border-radius: 2px;
  transition: all 0.3s ease;
   display: inline-block;

}

.check-them {
  background-color: var(--color-quaternary);
  color: var(--color-base);
}

.check-them:hover {
    background-color: #6b6668;
}

.paper-owner

{
    background-color: transparent;
  color: var(--color-quaternary);
  border: 2px solid var(--color-tertiary);
}

.paper-owner:hover {
  background-color: var(--color-tertiary);
}

.slime-pound {
  background-color: var(--color-base);
  padding: var(--spacing-xl) var(--spacing-md);
  border-top: 1px solid var(--color-tertiary);

}

.field-lemon {
	                    margin    : 0 auto;
    max-width  :    1200px;
}

.heavy-lemon {
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.giant-thumb {
    display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.giant-thumb .material-symbols-outlined {
   font-size: 24px;
  color: var(--color-secondary);
    margin-bottom: 0.5rem;
}

.giant-thumb p {
    font-size: 0.9rem;
  color: var(--color-secondary);
   line-height: 1.5;
}

.eject-them {
    display: flex;
  gap: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-tertiary);
  margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.eject-them a     {
  text-decoration: none;

  color: var(--color-secondary);

  font-size: 0.9rem;

  transition:      color 0.3s ease;
}

.eject-them a:hover		{
     color: var(--color-quaternary);
}

.paper-quota {
	 text-align: center;

	  padding-top: var(--spacing-md);

	  border-top: 1px solid var(--color-tertiary);
}

.paper-quota p {
  font-size: 0.85rem;
  color: var(--color-secondary); 
	
}

.field-thumb {
    position: fixed;
  bottom: 0;
    left: 0;
  right :0;
  background-color: var(--color-quaternary);
  padding: var(--spacing-md);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  z-index   : 9999;
    display: none;
}

.slime-quota {
   max-width: 1200px;
       margin: 0 auto;
     display: flex;
             justify-content: space-between;
      align-items: center;
     gap: var(--spacing-md);
}

.slime-quota p {
  color: var(--color-primary);
  font-size: 0.9rem;
      line-height: 1.5;
   flex :   1;
}

.eject-pound {

	  display: flex;
  gap: var(--spacing-sm);
   align-items: center;


}

.giant-owner  {
  color: var(--color-primary);
   text-decoration: underline;
  font-size: 0.85rem;
   white-space: nowrap;
}

.check-owner {


  background-color: var(--color-base);
  color: var(--color-quaternary);
    border: none;
  padding   :  0.625rem 1.5rem;
      font-weight: 600;
               font-size: 0.9rem;
   cursor: pointer;
  border-radius: 2px;
    transition: background-color 0.3s ease;
  white-space   :       nowrap;
  font-family: var(--font-main);
}


.check-owner:hover {
  background-color: var(--color-tertiary);
}@media (max-width:768px) {
.giant-quota {
display: block;
}

.check-pound{
position: absolute;
top: 100%;
left:0;
right: 0;
background-color: var(--color-base);
flex-direction: column;
padding: var(--spacing-md);
gap: var(--spacing-sm);
display: none;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.check-pound.slime-owner {
display:flex;
}

.giant-lemon {
font-size: 2rem;
}

.heavy-thumb{
font-size: 1rem;
}

.eject-quota {
flex-direction: column;
}

.check-them,.paper-owner {
text-align: center;
}

.heavy-lemon {
grid-template-columns: 1fr;
}

.eject-them {
flex-direction:column;
gap: var(--spacing-sm);
}

.slime-quota{
flex-direction: column;
text-align: center;
}

.eject-pound{
flex-direction: column;
width: 100%;
}

.check-owner {
width:100%;
}
}

@media (max-width: 480px){
.giant-lemon{
font-size: 1.75rem;
}

.paper-thumb {
height: 38px;
}

.field-thumb {
padding: var(--spacing-sm);
}

.slime-quota p {
font-size: 0.8rem;
}
}.paper-lemon {
  padding: var(--spacing-xl) var(--spacing-md);
  background-color: var(--color-base);
}

.check-quota {
    max-width: 1200px;
    margin: 0 auto;
	
}

.slime-lemon {
	 font-size: 2.25rem;
	font-weight: 700;
  color: var(--color-quaternary);
  margin-bottom: var(--spacing-lg);
   line-height: 1.3;
}

.heavy-quota {
          font-size: 1.05rem;
    line-height: 1.75;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-md);
   text-align: justify;
}

.giant-pound {
  width  :        100%;
  height: auto;
  margin-top: var(--spacing-xl);
   display: block;
    border-radius: 3px;
}@media (max-width: 768px){
.slime-lemon{
font-size: 1.75rem;
}

.heavy-quota {
font-size: 0.95rem;
text-align: left;
}

.giant-pound{
margin-top: var(--spacing-lg);
}
}

@media (max-width:480px) {
.slime-lemon {
font-size:1.5rem;
}

.paper-lemon{
padding: var(--spacing-lg) var(--spacing-md);
}
}.eject-owner  {
  padding: var(--spacing-xl) var(--spacing-md);
	 background-color: #f7f3f4;
}

.field-quota {
	max-width: 1200px;
    margin: 0 auto;
}

.heavy-pound {
	font-size     :      2.25rem;
  font-weight: 700;
  color: var(--color-quaternary);
  margin-bottom: var(--spacing-xl);
   text-align: center;


}

.giant-them {
  display   :        grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
}

.check-lemon {

	  background-color: var(--color-base);
    border-radius: 3px;
                    overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
			transition: transform 0.3s ease;


}

.check-lemon:hover {
  transform: translateY(-4px);
}

.paper-pound {

	  width: 100%;
  height: 280px;
	 object-fit: cover;
  display: block;




}

.slime-owner {
    font-size: 1.45rem;

	   font-weight: 600;

	  color: var(--color-quaternary);

	  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);

	    line-height: 1.3;
}

.field-them {
    font-size: 0.95rem;
   line-height: 1.7;
  color: var(--color-secondary);
  padding: 0 var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.eject-thumb {


  padding: var(--spacing-md);
  border-top: 1px solid var(--color-tertiary);
     }  

.heavy-them {
 font-size: 1.1rem;
   font-weight: 600;
  color: var(--color-quaternary);
}@media (max-width: 768px) {
.giant-them {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}

.heavy-pound{
font-size: 1.85rem;
}

.paper-pound {
height: 220px;
}

.slime-owner{
font-size: 1.25rem;
}
}

@media (max-width:480px){
.heavy-pound {
font-size:1.6rem;
margin-bottom: var(--spacing-lg);
}

.eject-owner {
padding:var(--spacing-lg) var(--spacing-md);
}

.paper-pound{
height: 200px;
}
}.field-quota-alt {
  padding: var(--spacing-xl) var(--spacing-md); 
	  background-color: var(--color-base);
}

.eject-owner-alt  
  {
   max-width: 1200px;
   margin: 0 auto;
}

.heavy-pound-alt {
		font-size: 2.25rem;
   font-weight:  700;
  color: var(--color-quaternary);
  margin-bottom: var(--spacing-xl);
	text-align:        center;
}

.giant-them-alt {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--spacing-xl);
}

.check-lemon-alt {
	text-align: center;
  padding: var(--spacing-lg);
}

.check-lemon-alt .material-symbols-outlined {
   font-size: 48px;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-md);
}

.slime-owner-alt{
     font-size    :    1.35rem;
   font-weight: 600;
  color: var(--color-quaternary);
  margin-bottom: var(--spacing-sm);

}

.field-them-alt {
	  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-secondary);
	}@media (max-width:768px){
.giant-them-alt{
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}

.heavy-pound-alt {
font-size: 1.85rem;
}

.check-lemon-alt{
padding: var(--spacing-md);
}
}

@media (max-width: 480px) {
.heavy-pound-alt{
font-size: 1.6rem;
margin-bottom: var(--spacing-lg);
}

.field-quota-alt{
padding: var(--spacing-lg) var(--spacing-md);
}

.slime-owner-alt {
font-size:1.2rem;
}
}.paper-field   {
	  background-image: url('../imago/kres.webp');
  background-size: cover;
    background-position: center;
	background-attachment: fixed;
  position: relative;
  padding: var(--spacing-xl) var(--spacing-md);
  min-height: 420px;
   display: flex;
  align-items: center;}

.paper-field::before {
  content: '';
  position: absolute;
        top: 0;
   left   :      0;
   right     :    0;
  bottom: 0;
  background-color: rgba(54, 50, 52, 0.78);
}

.giant-check {
    max-width    : 1200px;
    margin: 0 auto;
   position: relative;
  z-index: 1;
    text-align: center;
}

.slime-check {
   font-size: 2.5rem;
  font-weight:     700;
  color: var(--color-base);
  margin-bottom: var(--spacing-md);
    line-height: 1.2;


}



.heavy-check {
  font-size: 1.15rem;
  line-height: 1.8;
    color: #e8e4e6;
  margin-bottom: var(--spacing-xl);
    max-width: 850px;
   margin-left: auto;
    margin-right: auto;
}

.eject-check {


  display: inline-block;
    padding: 1rem 2.25rem;
  background-color: var(--color-base);
  color: var(--color-quaternary);
     text-decoration: none;
   font-weight  :   600;
  font-size: 1rem;
  border-radius   :   2px;
    transition: background-color 0.3s ease, transform 0.3s ease;
	}

.eject-check:hover {
  background-color: var(--color-tertiary);
  transform: translateY(-2px);
}@media (max-width: 768px) {
.paper-field {
min-height: 380px;
background-attachment: scroll;
}

.slime-check {
font-size: 1.95rem;
}

.heavy-check {
font-size: 1rem;
margin-bottom: var(--spacing-lg);
}

.eject-check {
padding: 0.875rem 1.75rem;
font-size: 0.95rem;
}
}

@media (max-width: 480px) {
.paper-field {
min-height: 350px;
padding: var(--spacing-lg) var(--spacing-md);
}

.slime-check {
font-size: 1.65rem;
}

.heavy-check {
font-size: 0.9rem;
}
}.heavy-field {
  padding: var(--spacing-xl) var(--spacing-md);
   background-color: #f7f3f4;
}

.paper-check {
    max-width: 800px;
 margin: 0 auto;
}

.field-check	{
     font-size: 2.25rem;
   font-weight: 700;
  color: var(--color-quaternary);
  margin-bottom: var(--spacing-sm);
	 text-align: center; 
	
}

.slime-field {
      font-size: 1.05rem;

	  color: var(--color-secondary);

	  text-align: center;

	  margin-bottom: var(--spacing-xl);

	  line-height: 1.6;
}

.giant-field {
     background-color: var(--color-base);
  padding: var(--spacing-xl);
   border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);}

.check-field {
  margin-bottom: var(--spacing-md);
}

.check-field label
{
   display: block;
  font-weight: 600;
  color: var(--color-quaternary);
  margin-bottom: var(--spacing-xs);
	font-size: 0.95rem; 
	
}

.check-field input,
.check-field textarea {
         width: 100%;
   padding: 0.75rem;
  border: 1px solid var(--color-tertiary);
   border-radius: 2px;
  font-family: var(--font-main);
                    font-size: 0.95rem;
  color: var(--color-quaternary);
  background-color: var(--color-primary);
   transition: border-color 0.3s ease;
}

.check-field input:focus,
.check-field textarea:focus {
   outline: none;
  border-color: var(--color-secondary);
}

.check-field textarea {
  resize: vertical;
}

.eject-field {
     width: 100%;
    padding: 1rem;
  background-color: var(--color-quaternary);
  color: var(--color-base);
    border: none;
   border-radius: 2px;
	font-weight: 600;
   font-size: 1rem;
  cursor: pointer;
  font-family: var(--font-main);
   transition: background-color 0.3s ease;}

.eject-field:hover {
    background-color    :     #6b6668;
}@media (max-width: 768px) {
.field-check {
font-size: 1.85rem;
}

.giant-field {
padding: var(--spacing-lg);
}
}

@media (max-width: 480px) {
.field-check {
font-size: 1.6rem;
}

.heavy-field {
padding: var(--spacing-lg) var(--spacing-md);
}

.giant-field {
padding: var(--spacing-md);
}
}.paper-disclaimer
{
   background-color: #f9f6f7;
  padding: var(--spacing-md);
  border-left: 3px solid var(--color-secondary);
  margin-bottom: var(--spacing-xl);
       border-radius: 2px;
}

.heavy-disclaimer {
  font-size: 0.85rem;
   line-height: 1.65;
  color: var(--color-secondary);
   margin: 0;

}

.heavy-disclaimer strong {
  color: var(--color-quaternary);
    font-weight  :600;
}@media (max-width: 768px) {
.paper-disclaimer {
padding: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}

.heavy-disclaimer {
font-size: 0.8rem;
}
}

@media (max-width: 480px) {
.heavy-disclaimer {
font-size: 0.75rem;
line-height: 1.6;
}
}.field-table {
       overflow-x: auto;
  margin: var(--spacing-xl) 0; 

}

.giant-table {
  width: 100%;
   border-collapse: collapse;
  background-color: var(--color-base);
}

.giant-table thead {

  background-color: var(--color-quaternary);}

.giant-table th {
  padding: var(--spacing-md);
  text-align: left;
    font-weight :      600;
  color: var(--color-base);
  font-size: 0.95rem;
  border-bottom: 2px solid var(--color-tertiary);
} 

.giant-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-tertiary);
  color: var(--color-quaternary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.giant-table tbody tr:hover {

   background-color: #faf8f9;

}

.giant-table tbody tr:last-child td {
	  border-bottom: none;
	}

.check-table {
    font-size  :0.9rem;
  color: var(--color-secondary);
	line-height: 1.7;
  margin-top: var(--spacing-md);
  font-style :   italic;
}@media (max-width: 768px) {
.giant-table {
font-size: 0.85rem;
}

.giant-table th,
.giant-table td {
padding: var(--spacing-sm);
}

.giant-table th {
font-size: 0.85rem;
}

.giant-table td {
font-size: 0.8rem;
}
}@media (max-width: 480px) {
.giant-table thead {
display: none;
}

.giant-table,
.giant-table tbody,
.giant-table tr,
.giant-table td {
display: block;
width: 100%;
}

.giant-table tr {
margin-bottom: var(--spacing-md);
border: 1px solid var(--color-tertiary);
border-radius: 3px;
overflow: hidden;
}

.giant-table td {
text-align: right;
padding-left: 50%;
position: relative;
border-bottom: 1px solid var(--color-tertiary);
}

.giant-table td:last-child {
border-bottom: none;
}

.giant-table td::before {
content: attr(data-label);
position: absolute;
left: var(--spacing-sm);
width: 45%;
padding-right: var(--spacing-sm);
text-align: left;
font-weight: 600;
color: var(--color-quaternary);
}

.giant-table td:nth-of-type(1)::before {
content: "Servicio";
}

.giant-table td:nth-of-type(2)::before {
content: "Modalidad";
}

.giant-table td:nth-of-type(3)::before {
content: "Honorario Base";
}

.giant-table td:nth-of-type(4)::before {
content: "Notas";
}
}